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.
Related
I am drawing 2 bars, one at 70% and the other at 100%. what I want is to have a tiny triangle pointing at 70%.
I draw my triangle like this:
.arrowUp {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
The thing is if I give left and right margins as 70% and 30% the I expect it to align with the tip at the end of the bar. But I end up with something like this:
How can I get the tip of the triangle to point at the end of the black bar?
Set a negative left margin.
.arrowUp {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
margin-left: -10px;
}
.bar1{
width: 500px;
height: 10px;
background-color: gray;
}
.bar2{
position: relative;
width: 70%;
height: 10px;
background-color: red;
}
.arrowUp {
position: absolute;
top: 100%;
right: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
<div class="bar1">
<div class="bar2">
<span class="arrowUp"></span>
</div>
</div>
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
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!
I have a box with a triangle that intersects it and I'd like a similar triangle to be cut out from the box so there is a white gap between the two. As this is a little hard to explain I created a jsFiddle here that shows what I have already.
Here is a screenshot
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
You can do this without the extra DIV for the arrow by using a UTF-8 "right arrow" and the :before pseudo class. This will give you a little more control over the style of the arrow.
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: relative;
margin-top:15px;
text-shadow: 0 1px #FFFFFF;
}
#alertdetails::before {
content:"\25b6";
position:absolute;
top:20px;
left:-20px;
font-size:60px;
color:#ffffff;
}
You just need to add a second triangle that is slightly bigger.
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-white"></div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
#arrow-white{
position: absolute;
top: 44px;
left: 15px;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 22px solid #ffffff;
}