This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I have tried following css:
.triangle:after {
position:absolute;
content:"";
width: 0;
height: 0;
margin-top:1px;
margin-left:2px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
.triangle:before {
position:absolute;
content:"";
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid black;
}
As i dont want to go with the SVG, is there any alternate way to achieve this.
You can use following css:
.triangle {
width: 0;
height: 0;
border-top: 100px solid #0099ff;
border-left: 100px dashed transparent;
border-right: 100px dashed transparent;
border-bottom: 0;
display: block;
overflow: hidden;
}
You can check this demo http://leplay.github.com/demo/triangle.html
Related
I have created a div that looks like an arrow with css border.
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
Now i want to create an extra border on the right side of that div, lets say: 1px solid black
How can i do that?
hers is the fiddle: https://jsfiddle.net/wqehc9vv/4/
So it should look like this:
image preview
You can use a pseudo-element like :before for that. And make it slightly bigger than the div. Also position it accordingly. See below
.blue-arrow-right {
width: 0;
height: 0;
position: relative;
float: left;
margin-left: 0px;
margin-top: 5px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #009de1;
}
.blue-arrow-right:before {
content:"";
position:absolute;
left:-30px;
top:-32px;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
border-left: 32px solid black;
z-index:-1;
}
<div class="blue-arrow-right">
</div>
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 7 years ago.
I have a css arrow top that I want to display in the top of the div, like this:
the problem is, the arrow is inside the div...
what is wrong here?
#news {
position:absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#news:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/
Your positioning code was just a little bit off. The best way to position the arrow pseudoelement (thanks to #vals) is to use bottom: 100% along with margin: auto, left: 0, and right: 0. That way your arrow will always stay in the correct position even if you decide to change the arrow's size.
Here is a working live demo:
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
}
#bellnews:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
JSFiddle Version: https://jsfiddle.net/3huzc74a/3/
Using absolute positioning with left:calc(50% - 5px); will always keep it in the middle no matter the width.
Here's a fiddle
#bellnews {
position:relative;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
display:inline-block;
}
#bellnews:before {
content: "";
position:absolute;
bottom:100%;
width: 0;
height: 0;
left:calc(50% - 5px);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
Try this one with position relative on parent and absolute on child:
#bellnews {
position:relative;
width: 140px;
height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/2/
You need to make :before pseudo element absolute .
Then use top to control the position of the pseudo element.
This is a nice tutorial to understand the basics.
Working code
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
width: 100px
}
#bellnews:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
position: absolute;
top: -5px;
}
<div id=bellnews>
</div>
If you make the position on the #news div relative, and the triangle absolute, it should work.
Updated your fiddle: https://jsfiddle.net/3huzc74a/7/
#bellnews {
position: absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
top: -5px;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 7 years ago.
I have a triangle
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid white;
}
How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs?
One way to do it is the create an inner triangle which is smaller.
.triangle-left {
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-right: 23px solid red;
}
.inner-triangle {
position: relative;
top: -20px;
left: 2px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
<div class="triangle-left">
<div class="inner-triangle"></div>
</div>
This is how I would do it.
.triangle-left {
width: 0;
height: 0;
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-right: 22px solid black;
position: relative;
}
.triangle-left:after {
content: '';
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-right: 21px solid #dddddd;
position: absolute;
top: -21px;
left: 1px;
}
<div class="triangle-left"></div>
Here it is on JSFiddle.
This question already has answers here:
Hexagon shape with a border/outline
(7 answers)
Closed 8 years ago.
Is there any way I can give this hexagonal shape a border?
The hexagon is made up of three parts top(triangle) middle(rectangle) and bottom(triangle).
I am having trouble because in order to make the top and bottom triangles of the hexagon, I have to use "border: transparent".
CSS:
.hex-mid {
width: 208px;
height: 120px;
background-color: #64C7CC;
}
.hex-top {
width: 0;
border-bottom: 60px solid #64C7CC;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
}
.hex-bot {
width: 0;
border-top: 60px solid #64C7CC;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
}
HTML:
<ul class="hexagon">
<li class="hex-top"></li>
<li class="hex-mid"></li>
<li class="hex-bot"></li>
</ul>
svg solution:
You can do this easily if you use svg:
<svg width="240" height="300" viewBox="-1 -1 240 300">
<path d="M104,0 L208,60 L208,180 L104,240 L0,180 L0,60z" stroke="black" stroke-width="1" fill="#64C7CC" />
</svg>
CSS solution:
You can add :before :pseudo-elements and position them behind the main elements.
.hex-mid {
width: 208px;
height: 120px;
background-color: #64C7CC;
position: relative;
}
.hex-mid:before {
content: '';
position: absolute;
z-index: -1;
width: 210px;
height: 122px;
background-color: black;
margin-left: -1px;
margin-top: -1px;
}
.hex-top {
width: 0;
border-bottom: 60px solid #64C7CC;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
position: relative;
}
.hex-top:before {
width: 0;
content: '';
position: absolute;
border-bottom: 60px solid black;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
margin-left: -104px;
margin-top: -1px;
z-index: -1;
}
.hex-bot {
width: 0;
border-top: 60px solid #64C7CC;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
}
.hex-bot:before {
content: '';
position: absolute;
width: 0;
border-top: 60px solid black;
border-left: 104px solid transparent;
border-right: 104px solid transparent;
margin-left: -104px;
margin-top: -59px;
z-index: -1;
}
li {
list-style: none;
}
<ul class="hexagon">
<li class="hex-top"></li>
<li class="hex-mid"></li>
<li class="hex-bot"></li>
</ul>
Using CSS you can acompish it with
-webkit-filter: drop-shadow(0px -2px 0px rgba(0, 0, 0,1));
on upper and
-webkit-filter: drop-shadow(0px 2px 0px rgba(0, 0, 0,1));
on lower triangle.
You may then have to assign
z-index: 1;
position:relative;
to your mid section to avoid overlapping.
It has been a long time since I built this triangle which points up. How can I alter my CSS to point the corner left?
http://jsfiddle.net/3sP8q/
.left-corner {
width: 0;
height: 0;
border-bottom: 15px solid #000;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: relative;
}
<div class="left-corner"></div>
Here is how:
.left-corner {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
<div class="left-corner"></div>
Use CSS-Tricks, it helps a lot!