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>
Related
How to create border triangle?
The only thing I can think of to make this is to make a triangle
.triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #8e8e8e;
}
But this is a solid triangle, is there a way to make it look like the triangle extends the border
Create an :after or :before element that absolutely positions at the bottom of your div.
.box {
position: relative;
background-color: #F00;
border: 1px solid #000;
width: 50px;
height: 50px;
}
.box:after {
content: "";
width: 16px;
height: 16px;
position: absolute;
background-color: #FFF;
bottom: -8px; /* half of the elements width/height */
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
<div class="box">
I've made the :after element white so you can see what's happening inside of it.
You need to move triangle element to under sub layout.
I added more triangle for the border design.
.balon {
width: 350px;
height: 120px;
border: 5px solid #2C6DBF;
margin: 50px auto;
position: relative;
border-radius: 8px;
}
.balon::after, .balon::before {
width: 0;
height: 0;
content: '';
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 21px solid #fff;
position: absolute;
bottom: -19px;
right: 0;
left: 0;
margin: auto;
}
.balon::before {
border-left-width: 20px;
border-right-width: 20px;
border-top-width: 25px;
border-top-color: #2C6DBF;
bottom: -25px;
}
<div class="balon">
</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'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>
I'm trying to create an element for ONE HTML tag that uses multiple pseudo elements/classes (eg. 4 or 5). Here is the end result I am trying to achieve, however I only want one HTML element:
.main {
position: relative;
display: inline-block;
padding: 5px;
background-color: pink;
border: 1px solid red;
}
.b1, .b2, .b3 {
display: inline-block;
}
.down-arrow-border {
position: absolute;
bottom: -15px;
left: 20px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid red;
}
.down-arrow {
position: absolute;
bottom: -14px;
left: 21px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 14px solid pink;
}
<div class="main">
<div class="b1">$</div>
<div class="b2">234</div>
<div class="b3">GBP</div>
<div class="down-arrow-border"></div>
<div class="down-arrow"></div>
</div>
Original Fiddle
Here is my attempt. I've only been able to use the ::before and ::after pseudo elements. How could I create the triangle element with additional pseudo elements/classes?
.b2 {
display: inline-block;
padding: 5px;
background-color: pink;
border: 1px solid red;
}
.b2::before{
content: '$';
}
.b2::after{
content: ' GBP';
}
<div class="b2">234</div>
Attemped Fiddle
Since there are more than two elements in your original (first fiddle), you cannot get this done with just one single element (because one element can at most have only two pseudo-elements attached to it).
The maximum reduction you can achieve is to do this using two elements like in the below snippet:
.main {
position: relative;
display: inline-block;
padding: 5px;
background-color: pink;
border: 1px solid red;
}
.b2 {
display: inline-block;
}
.b2::before {
content: '$';
}
.b2::after {
content: ' GBP';
}
.main::before {
position: absolute;
content: '';
bottom: -15px;
left: 20px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid red;
}
.main::after {
position: absolute;
content: '';
bottom: -14px;
left: 21px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 14px solid pink;
}
<div class="main">
<div class="b2">234</div>
</div>
But wait, that would definitely not be recommended solution. As Paulie_D had mentioned in his comments you are not using the pseudo-elements the appropriate way. Pseudo-elements should be used in general for adding extra styles to the element and not content that are critical (like a currency code, its symbol etc). They should be left to the back-end program which is fetching and sending the amount value.
So the solution that I would recommend would be the following:
.b2 {
position: relative;
display: inline-block;
padding: 5px;
background-color: pink;
border: 1px solid red;
}
.b2::before {
position: absolute;
content: '';
bottom: -15px;
left: 20px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid red;
}
.b2::after {
position: absolute;
content: '';
bottom: -14px;
left: 21px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 14px solid pink;
}
<div class="b2">$234 GBP</div>
If you are 100% intent on using pseudo-elements, I would give the below approach where the backend program sets data-curr-* attributes. But, it is way more easier for the backend to set the amount as a single string.
.main {
position: relative;
display: inline-block;
padding: 5px;
background-color: pink;
border: 1px solid red;
}
.b2 {
display: inline-block;
}
.b2::before {
content: attr(data-curr-symbol);
}
.b2::after {
content: ' ' attr(data-curr-code);
}
.main::before {
position: absolute;
content: '';
bottom: -15px;
left: 20px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid red;
}
.main::after {
position: absolute;
content: '';
bottom: -14px;
left: 21px;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 14px solid pink;
}
<div class="main">
<div class="b2" data-curr-symbol="$" data-curr-code="GBP">234</div>
</div>
I'm creating a site where I need both of these styles on the same button. I need a radius on the left hand side with the right hand side being an arrow. I've tried a few things. example the old fashioned background image with it aligned right for the arrow. Adding the web-kit radius to the button which didn't work out to good.
In the past I'd create the button as a back ground image. But with CSS3 and a bit of magic I'm sure there's a much better way to achieve this?
Anyone got a cleaner solution to the problem? I've had a google with a few coffee's But nothing quite does what I'm trying to do.
-I'm using bootstrap 2.3 has a framework so this would need to work on as many browsers as possible and at multiscreen resolutions.
This is possible through usage of the :before/:after pseudo elements.
jsFiddle here - Basic example
HTML - pretty simple
<div></div>
CSS
div {
width: 200px;
height: 50px;
background: black;
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:before {
content: '\A';
position: absolute;
right: -20px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid black;
z-index: 10;
}
div:after {
content: '\A';
position: absolute;
right: -30px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid blue;
}
I modified code above to achieve the goal you want: exactly the same as on your picture
HTML
<div id="div1"></div>
<div id="div2"></div>
CSS
body {
background: blue;
}
#div1 {
width: 200px;
height: 50px;
background: black;
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
z-index: 9;
}
#div1:before {
content: '\A';
position: absolute;
right: -28px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid black;
z-index: 10;
}
#div1:after {
content: '\A';
position: absolute;
right: -38px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 30px solid white;
}
#div2 {
width: 20px;
height: 50px;
background: white;
left: 196;
top: 8;
position: absolute;
}