I'm currently trying to make an Egyptian cartouche in CSS, of the usual form :
The border isn't terribly hard to do, with just
.cartouche
{
border: 4px double black;
border-radius:20px;
display:inline;
padding:3px 5px;
}
which gives for instance
It is lacking the bar of the cartouche, though. What would be a good way to add such a bar to the edge of a border?
If you mean the vertical bar at the right side, you could use a pseudo element and the following settings:
.cartouche {
width: 160px;
height: 80px;
border: 4px double black;
border-radius: 30px;
display: inline-block;
padding: 3px 5px;
position: relative;
}
.cartouche:after {
content: '';
position: absolute;
right: -8px;
width: 0;
top: -4px;
height: calc(100% + 8px);
border-right: 4px double black;
}
<div class="cartouche"></div>
or, a variation where that bar covers the rounded border and has a closed border line itself:
.cartouche {
width: 160px;
height: 80px;
border: 4px double black;
border-radius: 50px;
display: inline-block;
padding: 3px 5px;
position: relative;
}
.cartouche:after {
content: '';
position: absolute;
right: -4px;
width: 2px;
top: -4px;
height: calc(100% + 8px);
border: 1px solid black;
background: white;
}
<div class="cartouche"></div>
Related
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
I want to create a div with an image and text in it that looks like this.
I've managed to get something that looks like this here:
JSFiddle of pointed div
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
margin: 10px;
}
.triangle-down:before {
border-top: 20px solid red;
border-left: 101px solid transparent;
border-right: 101px solid transparent;
content: "";
height: 0;
left: -1px;
position: absolute;
top: 127px;
width: 0;
}
.triangle-down:after {
border-top: 20px solid white;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 125px;
width: 0;
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
The issues I have are:
(1) The curser turns to a pointer outside the shape when it crosses the transparent borders that help create the point. I'd prefer it if the pointer appeared only when inside the visible outline of the shape.
(2) Is there a better way of doing this? I looked at trying to rotate a div to create the point as I thought this would solve the pointer issue but I can't work out how to create an isosceles triangle shape with the correct proportions this way. This would also allow me to apply a border to create the outline rather than overlay two triangles as I have in the JSFiddle. See this post for more on this - Speech bubble with arrow
Here is a version using transform: rotate
/*Down pointing*/
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
position: relative;
margin: 10px;
z-index: 1
}
.triangle-down:before,
.triangle-down:after {
border-bottom: 2px solid red;
background: white;
content: '';
height: 50px;
left: 5px;
position: absolute;
top: 98px;
width: 54%;
transform: rotate(22deg);
z-index: 0;
}
.triangle-down:after {
left: auto;
right: 5px;
transform: rotate(-22deg);
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
I'm trying to create an envelope icon in HTML/CSS but I can't seem to get this part right.
Image 1
As you can see, the corners don't quite line up correctly with the diagonal lines and I don't really know how to open the angle a little more. This is what I've written :
CSS
.enveloppe {
overflow: hidden;
position: relative;
width: 14px; height: 11px;
border-radius: 3px;
margin-right: 6px;
background: white;
display: inline-block;
}
.enveloppe-plie{
position: absolute;
width: 14px;
height: 5px;
top: 3pt;
content: "";
display: inline-block;
border-right: 1px solid #333333;
border-top: 1px solid #333333;
transform: rotate(135deg);
vertical-align: top;
margin-top: -10px;
margin-left: -5px;
}
HTML
<div class="enveloppe">
<div class="enveloppe-plie"></div>
</div>
Replace margin-left: -5px; with margin-left: 3px; and it looks a bit better
This will make a white envelope. Use this link to learn to make triangles using CSS https://css-tricks.com/snippets/css/css-triangle/
CSS
.envelope {
background-color: white;
border-radius: 4px;
height: 64px;
width: 96px;
overflow: hidden;
position: relative;
}
.envelope-fold1, .envelope-fold2 {
border-right: 48px solid transparent;
border-left: 48px solid transparent;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.envelope-fold1 {
border-top: 48px solid black;
}
.envelope-fold2 {
border-top: 44px solid white;
}
HTML
<div class="envelope">
<div class="envelope-fold1"></div>
<div class="envelope-fold2"></div>
</div>
This is my code
.privacycheck1 {
position: relative;
top: 265px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 843px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 35px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
<div class="privacycheck1"></div>
I want to make it so when someone hovers over the privacycheck1, I want them to see an arrow connecting to the box pointing at privacycheck1's circle.
Is there anyway to make a class in a class?
You can use an extra span element to create this.
First create the tail of the arrow using the span and then create the arrow head using the border-hack on the after pseudo-element. You can find a wide range of arrows here
.privacycheck1 {
position: relative;
top: 30px;
background-color: #CF0000;
width: 24px;
height: 24px;
left: 30px;
border-radius: 50px;
border: 5px #E60000;
}
.privacycheck1::before {
position: relative;
display: block;
height: 20px;
width: 200px;
left: 30px;
}
.privacycheck1:hover::before {
content: 'This information is private';
width: 125px;
height: 30px;
background-color: #CF0000;
left: 40px;
top: -10px;
font-family: arial;
font-size: 15px;
font-weight: 100px;
color: white;
padding: 10px;
}
.arrow {
position: absolute;
width: 15px;
height: 5px;
background: green;
left: 20px;
top: 8px;
display:none;
}
.arrow:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
left:15px;
top:-2px;
display:none;
}
.privacycheck1:hover span,.privacycheck1:hover span:after{
display:block;
}
<div class="privacycheck1"><span class="arrow"></span>
</div>
You don't need an extra span. You can use an :after just like you used a :before.
.privacycheck1:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 0;
height: 0;
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #CF0000;
}
If you use top: 50%; and margin-top negative half the arrow height it will always be perfectly aligned in the vertical center. In this case I gave the arrow height: 30px; so the margin-top is -15px
Oh and you made a mistake in you hover:before. 'font-weight: 100px;' doesn't exist, you can use 'bold', '700' or another value.
Another tip, add this to your hover:before
left: calc(100% + 15px);
This way your box will always have the right distance between the 'dot' and the text box. The box will use the width of the parent (the element with position: relative;) + 15px (the width of the arrow) to align from the left.
I'm wondering if this shape can be done in css3 with as little html as possible:
So far, I've managed to do this:
.wrapper {
position: relative;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 100px;
left: 100px;
}
.box:before {
content: "";
border: 1px solid #000;
border-bottom: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
top: -12px;
left: -1px;
}
.box:after {
content: "";
border: 1px solid #000;
border-top: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
bottom: -12px;
right: -1px;
}
<div class="wrapper">
<div class="box"></div>
</div>
The fiddle is here, but I don't know how to skew it like that so that I have right angled trapezoid on top and bottom.
The shape needs no extra elements
The shape can be created with just the <div>:
The left side is created with the divs left, top and bottom borders.
The right side is made by :before and its top, right and bottom borders
The spans joining the two boxes are created with the :after thanks to skewY
Note the browser support of the transform property. IE 9 requires the -ms- prefix, and Safari and the Android browser require -webkit-.
Working Example - just the shape
The CSS has been condensed and the border style of the pseudo elements is inherited from the div itself.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
<div></div>
Working example - with text
With the example above, the contents will not be contained inside the entire shape. Rather, it will be constrained inside the divs half width. The contents needs to be wrapped in a <span> with 200% width to punch it outside of the divs constraints.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
span {
width: 200%;
display: block;
padding: 20px 10px 10px;
}
<div><span>This is me writing a large amount of words into the div. I think that you may want a span in order to contain them.</span></div>
Using two different elements:
1) Separate the shape in two different rectangular
2)After use pseudo-elements after and before to create the connection line.
My approach:
.wrapper {
position: relative;
}
.box {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 100px;
left: 100px;
border-right: 0;
}
.box2 {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 112px;
left: 164px;
border-left: 0;
}
.box:after {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
top: 2px;
transform: rotate(45deg);
}
.box:before {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
bottom: -10px;
transform: rotate(45deg);
}
<div class="box"></div>
<div class="box2"></div>
I've used four divs: .left, .right, .middle-top and .middle-bottom; and skewed .middle-top and .middle-bottom to add those connection lines.
.left {
width: 40px;
height: 100px;
border: 3px solid black;
border-right: 1px solid white;
position: absolute;
top: 50px;
left: 100px;
}
.right {
width: 40px;
height: 100px;
border: 3px solid #000;
border-left: 1px solid white;
position: absolute;
top: 60px;
left: 160px;
}
.middle-top {
width: 20px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 55px;
left: 137px;
z-index: 9;
}
.middle-bottom {
width: 21px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 158px;
left: 135px;
z-index: 9;
}
<div class="left"></div>
<div class="middle-top"></div>
<div class="middle-bottom"></div>
<div class="right"></div>