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>
Related
first post on Stack. I've been asked to recreate this design for a project and I'm not entirely sure how best to approach recreating this div/button with an arrowed bottom side.
I'm fairly comfortable with most CSS conventions but for custom styles like this, I'm a bit lost as to a starting point. If anybody could point me in the right direction I would be much appreciated.
Thanks very much,
Nathan
.button
{
position: relative;
background-color: rgb(128,250,128);
padding: 10px 0px;
width: 60px;
text-align: center;
}
.button::after
{
display: block;
position: absolute;
bottom: -10px;
content: "";
width: 0px;
border-color: rgb(128,250,128) transparent;
border-style: solid;
border-width: 10px 30px 0px 30px; /*10 is the height and 30 is half of parent width*/
}
<div class="button">
button
<div>
Here is the CSS you need to make a div/button angled downwards:
.menu {
background-color: #0b0;
border: 1px solid #000;
float: left;
height: 50px;
line-height: 50px;
margin: 0;
position: relative;
text-align: center;
width: 150px;
}
.menu.active {
background-color: #0d0;
}
.menu.active::after {
border-top: 10px solid #0d0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
bottom: -10px;
content: "";
left: 0;
position: absolute;
}
.menu.active::before {
border-top: 10px solid #000;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
bottom: -11px;
content: "";
left: 0;
position: absolute;
}
<div class="menu">
HOME
</div>
<div class="menu active">
MORE REVIEWS
</div>
<div class="menu">
ABOUT
</div>
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>
.square {
border: 2px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
font-weight: 600;
padding: 0 6px;
position: relative;
}
.square:before {
border-left: 10px solid transparent;
border-right: 0 solid transparent;
border-top: 10px solid #000;
bottom: -10px;
content: '';
display: block;
height: 0;
position: absolute;
transition: all 0.25s linear 0s;
right: 0;
width: 0;
}
<div class="square">
0
</div>
In the shown image i want to achieve the border around the zero using css only.
I tried this but i want hollow arrow so help me out.
I tried speech bubble but in my case background is dynamic and I need the the cutting part of bubble to be transparent
Try This:
.parent {
display: inline-block;
background-color: #339FFF;
padding: 15px;
}
.child {
background-color: transparent;
width: 30px;
height: 30px;
position: relative;
border:3px solid #FFF;
text-align: center;
color: #FFF;
line-height: 30px;
}
.child:before{
content: '';
border-top: 5px solid #339FFF;
border-left: 5px solid #FFF;
width: 0;
height: 0;
position: absolute;
bottom: -5px;
right: 0px;
z-index: 1;
}
.child:after {
content: '';
border-top: 10px solid #fff;
border-left: 10px solid #339FFF;
width: 0;
height: 0;
position: absolute;
bottom: -13px;
right: -3px;
}
<div class="parent">
<div class="mask">
<div class="child">0</div>
</div>
</div>
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>