css实现等腰三角形两腰宽为18px
时间: 2024-06-16 17:08:21 浏览: 4
要实现等腰三角形,可以利用CSS的边框和宽高属性来实现。以下是一种实现方式:
```html
<div class="triangle"></div>
```
```css
.triangle {
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 18px solid #000;
}
```
上述代码中,通过设置元素的宽度和高度为0,然后利用边框的特性来绘制三角形。border-left和border-right设置为透明,border-bottom设置为实线,宽度为18px,颜色为黑色。
相关问题
css将宽高20px的正方形裁剪成三角形
要将宽高为20px的正方形裁剪成三角,可以使用CSS的border属性和transparent关键字来实现。具体步骤如下:
1. 创建一个具有宽高为0的元素,并设置其边框宽度为20px。
2. 将元素的上边框和左边框设置为透明,即border-top-color和border-left-color属性设置为transparent。
3. 将元素的右边框和下边框设置为透明,即border-right-color和border-bottom-color属性设置为transparent。
这样就可以实现将正方形裁剪成三角形的效果。
以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid black;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
```
这段代码会创建一个黑色的三角形,宽高为20px。
css实现上下左右三角形
可以使用CSS的border属性来实现上下左右三角形,具体代码如下:
上三角形:
```css
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ccc;
}
```
下三角形:
```css
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ccc;
}
```
左三角形:
```css
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #ccc;
}
```
右三角形:
```css
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #ccc;
}
```
其中,50px为三角形的大小,#ccc为三角形的颜色。你可以根据需要调整这些值来实现不同大小、颜色的三角形。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)