长方形div做成一头尖角
时间: 2023-07-08 16:56:04 浏览: 61
实现这个效果可以使用CSS的伪元素`::before`和`::after`,以及`transform`属性来完成。
首先,将div设置为一个长方形,并设置其宽度和高度。然后,使用`::before`和`::after`伪元素来创建两个三角形。将它们的位置设置在div的顶部和底部,并使用`transform`属性将它们旋转45度,使其成为头尖角的形状。最后,用`background-color`属性将伪元素填充为与div相同的颜色。
以下是一个示例代码:
```html
<div class="triangle-div"></div>
```
```css
.triangle-div {
width: 100px;
height: 60px;
position: relative;
background-color: #4CAF50;
}
.triangle-div::before,
.triangle-div::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
}
.triangle-div::before {
border-width: 0 0 30px 30px;
left: 0;
top: -30px;
transform: rotate(45deg);
background-color: #4CAF50;
}
.triangle-div::after {
border-width: 30px 30px 0 0;
right: 0;
bottom: -30px;
transform: rotate(45deg);
background-color: #4CAF50;
}
```
通过上面的代码,您可以将一个普通的长方形div变成一头尖角的形状。