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.
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:
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.
So, i've created a triangle that points up with a background color of#222 using pure CSS.
I want to add a red 1px border to that triangle, but I have no idea how.
.arrow-tip {
width: 0; height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
}
The only way you could do something like this is to create another arrow just like it and put it behind the first to fake the border like this:
.arrow-tip {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
position: relative;
}
.arrow-tip:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -16px;
left: -17px;
z-index: -1;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-bottom: 17px solid red;
}
<div class="arrow-tip"></div>
You'll have to play with the dimensions until you get it just right.
You can use the :before and :after sudo selectors to create an arrow shape.
.arrow-tip {
position: relative;
margin-top: 100px;
}
.arrow-tip:after,
.arrow-tip:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow-tip:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #222;
border-width: 15px;
margin-left: -15px;
}
.arrow-tip:before {
bottom: -1px;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: red;
border-width: 17px;
margin-left: -17px
}
<div class="arrow-tip"></div>
JsFiddle Example: http://jsfiddle.net/tud0czmq/1/
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;
}