用CSS创建一个三角形？

问题描述：

Enter image description here

我想这是一个解决方案：

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

你可以看到它在Triangle工作。这是行得通的，但带有边界的诡计。有没有另一种方式可以完成？

使用SVG矢量这可以很容易地完成，但我不想走那么长的路。

只有CSS？透明的身体？ – Bigood 2013-04-26 07:47:13

http://apps.eky.hk/css-triangle-generator/ – 2013-04-26 07:48:36

http://hedgerwow.appspot.com/demo/arrows – 2013-04-26 07:49:10

答

我发现一个WebKit - 只解决方案，使用了▲字符：

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

<div class="triangle">&#9650;</div>

附加功能：

CanIUse reference为text-stroke
CSS-tricks文章
Useful HTML shapes

哈哈这很酷+1 – 2013-04-26 08:16:41

@Bigood：这是最好的解决方案，我在这个问题和棘手;） – Manoj 2013-04-26 08:16:57

@Manoz即使samuel是好的，他得到了我的upvote，因为这将跨浏览器这不是，但这是真正的酷 – 2013-04-26 08:17:42

答

尝试使用SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <polygon points="200,10 250,190 160,210" 
    style="fill:lime;stroke:purple;stroke-width:1"/> 
</svg>

这里是tutorial

请阅读http://w3fools.com – 2013-04-26 07:47:37

@Bigood这是没有提到的问题。我的回答比他的评论 – Sowmya 2013-04-26 07:54:07

+1还要旧，因为即使它不是OP实际要求的内容，SVG也是更合适的解决方案。另外，OP显然误解了SVG - 这里给出的答案很难被描述为“冗长”。 – Spudley 2013-04-26 08:01:58

答

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

<div class="triangle"> 
</div>

这将是一个三角形朝上方指出。不要将边框指定到需要指向的一侧。

以上是等边三角形。删除border-left使其成为一个直角三角形。

是否有其他方式，不使用边框技巧？ – Manoj 2013-04-26 07:52:32

svg或图像 – soyuka 2013-04-26 07:55:52

答

CSS-边境版本：

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

添加一个白色三角形的黑一个内部：http://jsfiddle.net/samliew/Hcfsx/

+1尼斯解决方案:) – Bigood 2013-04-26 08:19:39

答

考虑使用<canvas>元素。我在jsfiddle上建立了一个简单的三角形 - 没有什么特别的。

<canvas id="myCanvas" width="20" height="20"></canvas> 

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();

答

你可以用我在这里介绍的方法：How does this CSS triangle shape work?用旋转伪元素。然后，您可以向旋转的伪元素添加边框以创建要查找的效果。

您也可以使用此技术在图像，梯度或任何非朴素的背景，以显示与边框的三角形：

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

<div class="tr"></div>

用CSS创建一个三角形？

相关推荐