how to create Hollow triangle in css
Not exactly cross-browser but works. Hope I've understood your request.
http://jsfiddle.net/wmDNr/3/
.triangle {
position: relative;
width: 20px;
margin-top: 100px;
}
.triangle>div {
width: 20px;
height: 2px;
background: red;
margin-top: 100px;
}
.triangle>div:before {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(56deg);
-moz-transform: rotate(56deg);
-ms-transform: rotate(56deg);
transform: rotate(56deg);
position: absolute;
top: -8px;
right: -5px;
}
.triangle>div:after {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(-56deg);
-moz-transform: rotate(-56deg);
-ms-transform: rotate(-56deg);
transform: rotate(-56deg);
position: absolute;
top: -8px;
left: -5px;
}
Triangle with CSS with border
Someone already posted a pretty good answer to this question: https://stackoverflow.com/a/18607208/1320911
http://jsfiddle.net/wmDNr/3/
.triangle {
position: relative;
width: 20px;
margin-top: 100px;
}
.triangle>div {
width: 20px;
height: 2px;
background: red;
margin-top: 100px;
}
.triangle>div:before {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(56deg);
-moz-transform: rotate(56deg);
-ms-transform: rotate(56deg);
transform: rotate(56deg);
position: absolute;
top: -8px;
right: -5px;
}
.triangle>div:after {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(-56deg);
-moz-transform: rotate(-56deg);
-ms-transform: rotate(-56deg);
transform: rotate(-56deg);
position: absolute;
top: -8px;
left: -5px;
}
How to create a transparent triangle with border using CSS?
I've found a webkit-only solution, using the ▲ character:
.triangle { -webkit-text-stroke: 12px black; color: transparent; font-size: 200px;}
<div class="triangle">▲</div>
Triangle in CSS inside a box
Creative use of borders to achieve this effect, no images were harmed in the following sample and you can even set the position of the arrow on the element itself - becomes more straightforward if you can hardcode it for your design.
HTML
<div class="top">
<span class="arrow" style="left:40%"></span>
</div>
CSS
.top {
background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg);
background-size:cover;
width:300px;
height:300px;
border:1px solid #888;
position:relative;
overflow:hidden;
}
.arrow {
border:30px solid #aaa;
border-bottom:none;
border-color:transparent #aaa transparent #aaa;
position:absolute;
left:0;
bottom:0;
}
.arrow:before, .arrow:after {
content:'';
position:absolute;
width:5000px;
bottom:0;
height:30px;
background:#aaa;
}
.arrow:before {
right:30px;
}
.arrow:after {
left:30px;
}
Working JSfiddle sample.
Or the full integrated sample here.
How to make 3-corner-rounded triangle in CSS
My best attempt: http://dabblet.com/gist/4592062
Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :)
.triangle { position: relative; background-color: orange; text-align: left;}.triangle:before,.triangle:after { content: ''; position: absolute; background-color: inherit;}.triangle,.triangle:before,.triangle:after { width: 10em; height: 10em; border-top-right-radius: 30%;}
.triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866);}.triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);}.triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);}
<div class="triangle"></div>
Transparent hollow or cut out circle
You can achieve a transparent cut out circle with 2 different techniques :
1.SVG
The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made with 2 arc commands :
With the mask element :
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}
<svg viewbox="0 0 100 50" width="100%">
<defs>
<mask id="mask" x="0" y="0" width="80" height="30">
<rect x="5" y="5" width="90" height="40" fill="#fff"/>
<circle cx="50" cy="25" r="15" />
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>
</svg>
Related Topics
Using Negative Integers with Implicit Rows in CSS Grid
CSS Selection Color Behaving Strangely on Chrome
Add a Rule Between CSS Grid Columns and Rows
How Text-Replace Property Work in CSS
How to Style <Input Type="Text"> in IE6 CSS
CSS Sprites - Not Only for Background Images
Less CSS, @Import Path from Variable
Why 'Float:Left' Doesn't Work with a Fixed Width
Background Color on Input Type=Button :Hover State Sticks in Ie
Floating Image to the Left Changes Container Div's Height
Export HTML Table to Excel and Keep CSS Styles
Change Color of Svg Background-Image (Bootstrap 4 Carousel)
Rectangle Border Around Svg Text
Twitter Bootstrap Remove Table Row Highlight with Row Stripes