如何绘制三角形透明背景与边框？ [英] How to draw triangle with transparent background with border?

问题描述

我想知道如何绘制一个带边框的透明背景的三角形？我发现的例子不提供边界。

I would like to know how to draw a triangle with a transparent background with borders? The examples I had found do not provide borders. Any way to accomplish this?

推荐答案

演示

 .triangle {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid red;
     position:relative;
 }
 .triangle:after{
     content:'';
     position:absolute;
     top:5px;
     left:-45px;
     width: 0;
     height: 0;
     border-left: 45px solid transparent;
     border-right: 45px solid transparent;
     border-bottom: 92px solid white;

}

这篇关于如何绘制三角形透明背景与边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！