温馨提示:本文翻译自stackoverflow.com,查看原文请点击:css - Triangles at the corners of a DIV
css

css - DIV角落处的三角形

发布于 2020-03-27 10:55:08

我正在尝试用偷工减料来构建DIV,如下所示:

在此处输入图片说明

我仅使用教程设法在右上角进行操作,下面是代码:

.lifeatblock {
background-color: #435973 !important;
position:relative;
}

.lifeatblock:after {
content: '';
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #fff transparent transparent;
width: 0;
height: 0;
right: 0;
top: 0;
position: absolute;
}

我尝试使用:before建立左下角,但失败了。有人知道我该怎么做吗?谢谢。

查看更多

查看更多

提问者
Alex
被浏览
56
adel 2019-07-03 22:16

可以使用这样的伪元素来完成!

*{
  margin:0;
  padding:0;
}
.box{
  background-color:blue;
  width:400px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.box:before, .box:after{
        content:"";
        position:absolute;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 30px solid white;
    }
 .box:before{
   transform:rotate(-135deg);
     left:-20px;
   bottom:-12.5px;
} .box:after{
   transform:rotate(45deg);
     right:-20px;
   top:-12.5px;
}
<div class="box"></div>

发布
问题

分享
好友

手机
浏览

扫码手机浏览