I am trying to draw a triangle in css which contain only borders. no background colors.
.arrow {
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 20px solid #000;
height: 0;
width: 0px;
}
The above code gives me a triangle with #000 as background colors. i just want the triangle borders.
.arrow:after {
content: '\25c1';
display: inline-block;
}
Related
I design an arrow top of an ul box menu like this picture:
You can see, I set a border around of box:
border: .1rem solid rgba(228,234,248,.5);
but Is there a way to set a border around of arrow?
.mega-dropdown-menu:before {
content: "";
border-bottom: 8px solid #fbfbfb;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
position: absolute;
top: -7px;
left: 13.1rem;
z-index: 10;
}
Well, no ways to set a border around the arrow as the triangle you made is itself a border. But there's a solution, you can overlay the triangles on each other like, this will give you a border effect around your triangle.
div {
position: relative;
/* make sure you use this else your elements will fly in the wild */
}
div:before {
content: "";
border-bottom: 10px solid #aaa;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
position: absolute;
left: -2px;
top: -2px;
}
div:after {
content: "";
border-bottom: 8px solid #ddd;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
position: absolute;
}
<div></div>
I am having trouble with making triangle shaped button using css and it is bit buggy and how can i fix it?
There is a fiddle here:
https://jsfiddle.net/Adrianalings/jy11o85s
.btn {
position: fixed;
bottom: 50%;
height: 0px;
background-color:transparent;
border-top: 15px solid transparent;
border-left: 20px solid red;
border-bottom: 15px solid transparent;
}
Here is the solution =)
.btn {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 50px 0 50px 86.6px;
border-color: transparent transparent transparent #C40006;
background-color:transparent;
}
<button class="btn"></button>
Can anyone explain how it forms a triangle when the CSS width and height are set to 0.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
This is just a clever CSS Trick, shown on CSS Tricks.
It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).
A border is created on the outside of the set sized dimensions of an element unless you're using box-sizing: border-box and then all borders and padding are included in the set size of that element. Therefore, even though your element size is 0, it's building outside that to the size determined in your border rule.
Nothing magical happening here.
E.g.
div {
width: 0;
height: 0;
border: 10px solid #ccc;
}
<div></div>
http://codepen.io/paulcredmond/pen/rrpRjz
I have datapicker like this http://pokit.org/get/?fec9e8af4aa6af07f290705fff6a5769.jpg
This is my code
#ui-datepicker-div:before{
content: '';
position: absolute;
display: block;
left: 15px;
top:-9px;
width: 0;
height: 0;
border-left: 9px solid rgba(0,0,0,0.01);
border-right: 9px solid rgba(0,0,0,0.01);
border-bottom: 9px solid rgba(0,0,0,0.01) !important;
overflow: hidden;
}
Border is white and not visible on white background if I put border-bottom: 9px solid #ddd. Background of caret has color #ddd.
I need only border like on datapicker in image.
I have the following, where I am creating a triangle (that looks like it has a border) with css.
I want to create another triangle, exactly the same, but about 50px to the right of the 1st one.
How would you do these 2 :before's :after's ???
JSfiddle Here
HTML
<div class="section-modules">
<div class="my-account">
<div class="section-module-light">
<h3>Register Here</h3>
<p>It’s quick and easy and you’ll be the first to know about new bits we release.</p>Register Now
</div>
</div>
</div>
CSS
.section-module-light:after,
.section-module-light:before {
content: '';
position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
position: relative;
margin-bottom: 2em;
padding: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: transparent;
color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
bottom: -0px;
left: 150px;
border-width: 36px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
bottom: -1px;
left: 150px;
border-width: 34px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
JSfiddle Here
you do not need to create the triangle with separate stroke and fill, use css3 transform rotate. Then you can use before for one triangle and after for the second one.
display: block;
width: 34px;
height: 34px;
transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;
see the whole code here: http://jsfiddle.net/07jfLdwL/
You can use CSS3 transform rotate properties. See documentations.