html加css画正六边形
时间: 2023-07-26 08:28:09 浏览: 66
可以通过CSS的transform属性来实现一个正六边形,代码如下:
```html
<div class="hexagon"></div>
```
```css
.hexagon {
width: 100px;
height: 55px;
background-color: #f00;
position: relative;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 27.5px solid #f00;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 27.5px solid #f00;
}
```
通过设置div的宽高以及背景色,可以实现一个正六边形。其中:before和:after伪元素设置了两个三角形,通过定位和transform属性旋转90度,然后拼接在一起,形成了一个正六边形的形状。
相关问题
html中怎么写正六边形,如何用css画正六边形?用css画正六边形的两种方法(代码实例)...
可以使用 CSS 的 transform 和伪元素来画正六边形。
第一种方法:
HTML 代码:
```html
<div class="hexagon"></div>
```
CSS 代码:
```css
.hexagon {
width: 100px;
height: 55px;
position: relative;
background-color: #6c5ce7;
margin: 27.5px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 27.5px solid #6c5ce7;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 27.5px solid #6c5ce7;
}
```
第二种方法:
HTML 代码:
```html
<div class="hexagon"></div>
```
CSS 代码:
```css
.hexagon {
width: 100px;
height: 55px;
position: relative;
background-color: #6c5ce7;
margin: 27.5px 0;
transform: rotate(120deg);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
transform: rotate(-60deg);
}
.hexagon:before {
transform-origin: bottom left;
}
.hexagon:after {
transform-origin: bottom right;
}
```
html加css画三角形
可以使用CSS3的 `border` 属性来实现一个三角形,具体代码如下:
HTML:
```
<div class="triangle"></div>
```
CSS:
```
.triangle {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent #000 transparent;
}
```
解释:
首先,我们创建一个空的 `div` 元素,并设置它的宽度和高度为 0。
然后,我们使用 `border-width` 属性设置三角形的边框宽度为 50px。
接着,我们使用 `border-style` 属性设置三角形的边框样式为实线。
最后,我们使用 `border-color` 属性设置三角形的边框颜色。这里我们让左侧、右侧和底部的边框颜色为黑色,而顶部的边框颜色为透明,从而得到一个三角形形状。
需要注意的是,这里的三角形是等腰直角三角形,如果需要画其他形状的三角形,需要调整 `border-width` 和 `border-color` 属性的值。