CSS 实现五边形

破晓小v

于 2022-07-14 15:16:27 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_41983443/article/details/125785064

版权

前端-CSS篇专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS 实现五边形

五边形效果如下图：在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
<head>
<style>
.div-p {
  width: 300px;
  height: 300px;
  background: silver;
} 
.cus{
  width: 0;
  height: 0;
  border: 30px solid #db2d04;
  border-bottom: 10px solid #db2d04 !important;
 // border-bottom-color: red;
  position: relative;
  top: 100px;
}

.cus:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid #db2d04 !important;
  border: 30px solid transparent;
 // border-bottom-color: red;
 position: absolute;
  top: 10px;
    left: -30px;
}
}
</style>
</head>
<body>