写一个圆角倒三角,参数如下width: 34px; height: 27px; background-color: #96ceb8; margin-top: 15px; margin-left: 128px;
时间: 2024-09-20 08:15:55 浏览: 35
要创建一个宽度为34像素、高度为27像素的圆角倒三角形,并设置背景颜色为#96ceb8,边距上为15像素,左边距为128像素,可以使用CSS伪元素(`:before` 和 `:after`) 来实现。下面是一个简单的示例:
```html
<div class="rounded-triangle"></div>
```
```css
.rounded-triangle {
position: relative;
width: 34px;
height: 27px;
background-color: #96ceb8;
margin-top: 15px;
margin-left: 128px;
/* 创建三角形 */
content: '';
display: inline-block;
vertical-align: middle;
}
.rounded-triangle:before,
.rounded-triangle:after {
content: '';
position: absolute;
top: -15px; /* 上边缘距离三角形底部的距离 */
width: 0;
height: 0;
border-style: solid;
}
/* 底部边作为填充 */
.rounded-triangle:before {
border-width: 15px 17px 0;
left: calc(50% - 17px); /* 计算左边缘确保居中 */
}
/* 圆角三角形顶部 */
.rounded-triangle:after {
border-width: 15px 17px 15px 0;
border-bottom-color: transparent;
left: calc(50% - 17px);
}
```
这个CSS样式会生成一个有圆角的倒三角形,因为三角形的尖端部分是透明的。
阅读全文