用 CSS 的 ::after 伪元素和 border 属性制作一个右三角形状
时间: 2023-04-05 09:00:46 浏览: 140
可以使用以下 CSS 代码制作一个右三角形状:
```
.element {
position: relative;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
}
.element::after {
content: "";
position: absolute;
top: -10px;
right: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid white;
}
```
这个代码将会在一个元素的右侧创建一个黑色的三角形,同时在三角形的右侧创建一个白色的三角形,用于制作右三角形状。
相关问题
使用::after画一个红色三角形css
可以使用以下代码画一个红色三角形:
```css
.element::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
}
```
在这个代码中,`::after` 伪元素被用来创建一个独立的三角形形状。`content` 属性被设置为空,因为我们不需要任何文本内容。`display` 属性被设置为 `block`,以使 `::after` 元素占据一行。`width` 和 `height` 属性被设置为 `0`,这是因为我们要用边框来创建三角形。`border-left` 和 `border-right` 属性被设置为 `10px` 的虚线,使得三角形的左右两侧都没有边框。`border-bottom` 属性被设置为 `10px` 的实线,这是因为三角形的下侧需要一个实线的边框,而这个边框也决定了三角形的高度和宽度。最后,`border-color` 属性被设置为红色,以使三角形的颜色为红色。
写一个有hover::before和hover::after的HTML和css代码
HTML代码:
```html
<div class="box"></div>
```
CSS代码:
```css
.box {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
}
.box::before {
content: "";
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.box::after {
content: "";
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #000;
border-bottom: 50px solid transparent;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.box:hover::before {
border-right-color: #f00;
}
.box:hover::after {
border-left-color: #f00;
}
```
上面的代码中,使用 `::before` 和 `::after` 伪元素在 `.box` 元素的左侧和右侧分别创建了两个三角形,当鼠标悬浮在 `.box` 元素上时,利用 `:hover` 伪类和 `transition` 属性实现了两个三角形颜色从黑色到红色的渐变效果。