Create a triangle with CSS?

问题:

How can I create the following shape with CSS?

I tried this to be a solution:

 .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;     } 

You can see it working at Triangle. This is working, but with a trick of borders. Is there another way it could be done?

Using SVG vectors this can be done easily, but I don't want to go that lengthy way.

回答1:

I've found a WebKit-only solution, using the ▲ character:

.triangle {   -webkit-text-stroke: 12px black;   color: transparent;   font-size: 200px; }

▲

Extras:

• CanIUse reference for text-stroke
• CSS-tricks article
• Useful HTML shapes

回答2:

CSS-border version:

.triangle {     position: relative;     width:0;     border-bottom:solid 50px black;     border-right:solid 30px transparent;     border-left:solid 30px transparent; } .triangle .empty {     position: absolute;     top:9px;     left:-21px;     width:0;     border-bottom:solid 36px white;     border-right:solid 21px transparent;     border-left:solid 21px transparent; } 

Adding a white triangle inside the black one: http://jsfiddle.net/samliew/Hcfsx/

回答3:

Try using SVG

Here is the tutorial

回答4:

.triangle{     width:0;     border-bottom:solid 30px black;     border-right:solid 30px transparent;     border-left:solid 30px transparent; }  
 
 

This will be a triangle pointed towards the top. Don't specify the border to the side where you need it to be pointed.

The above is an equilateral triangle. Remove border-left to make it a right-angled triangle.

回答5:

Consider using the element. I build a simple triangle on jsfiddle - nothing fancy, yet.

  var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');  context.beginPath(); context.moveTo(10, 0); context.lineTo(20, 20); context.lineTo(0, 20); context.closePath(); context.fill(); 

回答6:

You can use the method I described here : How does this CSS triangle shape work? with a rotated pseudo element. You can then add a border to the rotated pseudo element to create the effect you are looking for.

You can also use this technique to display the triangle with borders over an image, gradient or any non plain backgrounds :

DEMO

.tr{   width:40%;   padding-bottom: 28.28%; /* = width / sqrt(2) */   position:relative;   border-bottom: 6px solid rgba(0,0,0,0.8);   border-right: 6px solid transparent;   border-left: 6px solid transparent;   overflow:hidden; } .tr:before{   content:'';   position:absolute;   bottom:0; left:0;   width:100%; height:100%;   border-top:6px solid rgba(0,0,0,0.8);   border-left:6px solid rgba(0,0,0,0.8);      -moz-box-sizing:border-box;   box-sizing:border-box;        -webkit-transform-origin:0 100%;   -ms-transform-origin:0 100%;   transform-origin:0 100%;        -webkit-transform: rotate(45deg);   -ms-transform: rotate(45deg);   transform: rotate(45deg); }   /* FOLLOWING JUST FOR THE DEMO */ body{background:url('http://lorempixel.com/output/people-q-g-640-480-1.jpg');background-size:cover;}

文章来源: Create a triangle with CSS?