css 画一个红色五角星
时间: 2023-10-25 22:11:36 浏览: 50
好的,以下是 CSS 代码可以画出红色五角星:
```
.star {
display: inline-block;
border-width: 10px 4px;
border-style: solid;
border-color: #f00 transparent transparent transparent;
transform: rotate(35deg);
margin-right: 10px;
}
```
同时,在 HTML 中添加以下代码即可显示红色五角星:
```
<div class="star"></div>
```
相关问题
css画一个五角星
可以使用CSS伪元素来绘制五角星。以下是一种方法:
```css
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 30px solid #f1c40f;
border-left: 20px solid transparent;
transform: rotate(35deg);
}
.star::before {
content: "";
position: absolute;
top: -10px;
left: -20px;
width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 30px solid #f1c40f;
border-left: 20px solid transparent;
transform: rotate(-70deg);
}
.star::after {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 30px solid #f1c40f;
border-left: 20px solid transparent;
transform: rotate(70deg);
}
```
这个CSS代码将创建一个黄色的五角星。.star类设置了一个相对定位,并使用border属性创建三角形,然后使用transform属性旋转它们。伪元素::before和::after分别创建两个倾斜的三角形,共同组成五角星的形状。您可以通过更改border的大小和颜色来自定义五角星的外观。
使用css画一个红色三角形
可以使用 CSS 的 border 属性来实现一个红色三角形,代码如下:
```css
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
}
```
这个三角形的宽高可以根据具体需求进行调整,其中 border-left 和 border-right 控制三角形的底边,border-bottom 控制三角形的高度。