html页面中,定义一个div
<div class="sanjiao"></div>
则相应的css样式为:
/*90°角在左上角*/
.sanjiao{
position: absolute;right: 115px;
z-index: 2;
top: 0px;
width: 0px;
height: 0px;
border-top: 180px solid rgba(140, 15, 0, 0.7);
border-right: 180px solid transparent;
}
/*90°角在右上角*/
.sanjiao{
position: absolute;
right: 115px;
z-index: 2;
top: 0px;
width: 0px;
height: 0px;
border-top: 180px solid rgba(140, 15, 0, 0.7);
border-left: 180px solid transparent;
}
/*90°角在左下角*/
.sanjiao{
position: absolute;right: 115px;
z-index: 2;
top: 0px;
width: 0px;
height: 0px;
border-bottom: 180px solid rgba(140, 15, 0, 0.7);
border-right: 180px solid transparent;
}
/*90°角在右下角*/
.sanjiao{
position: absolute;right: 115px;
z-index: 2;
top: 0px;
width: 0px;
height: 0px;
border-bottom: 180px solid rgba(140, 15, 0, 0.7);
border-left: 180px solid transparent;
}
以上结果依次如下图所示:
90°在左上角示意图: 右上角示意图: 左下角示意图: 右下角示意图 :