css实现刘海梯形边框

滕青山博客

于 2023-06-14 17:01:45 发布

阅读量531

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_34626094/article/details/129839649

版权

效果：
在这里插入图片描述

一般来说就是加一个梯形，我的话一般都是增加一个div然后用伪类实现：

<div class="demo">
  <div class="block"></div>
</div>

.demo {
  width: 500px;
  height: 500px;
  border: 3px solid #253365;
  margin: auto;
}
.demo .block {
  background: #253365;
  width: 100px;
  height: 10px;
  position: relative;
  margin: 0 auto;
}
.demo .block:before,
.demo .block:after {
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #253365;
  display: block;
  position: absolute;
  left: 0;
  transform: translate(-50%);
}
.demo .block:after {
  left: auto;
  right: 0;
  transform: translate(50%);
}
body {
  width: 100vw;
  height: 100vh;
  background: #060d2a;
  display: flex;
}