How can I create Triangle with white border using CSS? Like the image below.
when i add this css
.triangle {
width:0;
height:0;
border-top: 20px solid transparent;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
position:relative;
}
.triangle:before {
content:'';
width:0;
height:0;
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
position:absolute;
top:-10px;
left:-17px;
}
result is
CSS:
.triangle {
width:0;
height:0;
border-top: 20px solid transparent;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
position:relative;
}
.triangle:before {
content:'';
width:0;
height:0;
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
position:absolute;
top:-10px;
left:-17px;
}
HTML:
<div class="triangle"></div>
Fiddle
Related
I want to increase the width & height of the svg slope.
Here is my code.
[https://codepen.io/hetal001/pen/pZWRYz][1]
if you write this code you must know how to make this shape bigger
but for this arrow I suggest to use this code :
div {
margin-top:20px;
}
.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>
it's very simple to customize
I am trying to do this shape with css3:
Is it possible with css3 or good idea to keep it as a background image. If I make it with background images, is there any problem with making it responsive?
I tried with before and after elements, but couldn't get it working:
#shape {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
}
#shape2 {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
position: relative;
}
#shape2 h2 {
text-align: center;
background: #ffde00;
padding: 20px;
margin: 0px 0px 0px 0px;
border-radius: 5px 0px 0px 5px;
}
.title {
position: absolute;
top: 200px;
left: 90px;
color: #fff;
}
<div id="shape"></div>
</br>
<div id="shape2"></div>
<div class="title">
<h2> New Title ,</h2>
</div>
Here is a sample of how to do this shape with CSS3:
#shape {
border-left: 70px solid transparent;
border-top: 70px solid #ffde00;
border-right: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
}
<div id="shape"></div>
Regards
I have a little issue.
I need to get image like bellow but can't set arrow as I want but I think that I am close :)
http://jsfiddle.net/LDhLv/
.d:after {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 95%;
left: 100px;
border-left: 10px solid #666;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 0px solid transparent;
}
Try this:
CSS:
.d{border:1px solid #666; background: #fff; width:100px; height:50px; margin:60px;position:relative}
.d:before, .d:after{
content: "";
position:absolute;
width: 0;
height: 0;
}
.d:before {
top: -10px;
right: -1px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
}
.d:after {
top: -8px;
right: 0px;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
}
JSFiddle
I've tweaked the top/bottom left/right positioning for a more stable position, relative to the parent element. Also, I created the arrow in such a way that no rotation is necessary.
You need to use the right border and the rest is just position
.d:after {
content: "";
position:absolute;
width: 0;
height: 0;
bottom: 40px;
left:80px;
border-left: 10px solid transparent;
border-right: 10px solid #666;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
See modified JSFiddle
Change border-left: 10px solid #666 to border-left: 10px solid transparent.. and border-top: 0px solid transparent to border-top: 10px solid transparent.
To change shape of the triangle, set 0px on border-right or just remove it completely.
jsFiddle example
.d:after {
content: "\A";
position:absolute;
bottom: 50px;
left: 90px;
border-bottom: 10px solid #666;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
}
Like it's said in title, does someone know the trick to make the triangles with CSS2 (not CSS3) without using images ?
A little request on a good website will give your answer :
http://css-tricks.com/snippets/css/css-triangle/
.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>
I am trying to make something like an horizontal label:
But there is a condition, should be an unique div. Probably with canvas is possible, however i have preference by css.
#msg {
border-bottom: 10px solid transparent;
border-right: 10px solid red;
border-top: 10px solid transparent;
height: 0;
width: 100px;
background-color: rgba(0,0,0,.8); margin-left:20px;
}
demo
You can accomplish this with some border hacks, positioning, and the :before psudo-element.
http://jsfiddle.net/VQcyD/
#msg {
width:100px;
height:40px;
background:red;
margin-left:40px;
position:relative;
}
#msg:before {
content:"";
position:absolute;
border-bottom: 20px solid transparent;
border-right: 20px solid red;
border-top: 20px solid transparent;
height: 0px;
width: 0px;
margin-left:-20px;
}