css 修改三角形大小_使用css绘制三角形

好看的前端网页大家见到的应该都不少

但是很多都是用图片作为背景

今天我们就给大家讲讲怎么用css绘制图形

(图形如下)

----------------------------------------------------------------------

首先可以看到有一个div盒子

宽300个像素值

width: 300px;

高100个像素值

height: 100px;

边框1个像素值并且是黑色的实线

border: 1px solid #000;

最后还有四个圆角大概30个像素值

border-radius: 30px;

(圆角像素值凭自行喜欢)

----------------------------------------------------------------------

接下来是三角形的绘制

也是我们今天的重点

这时候再建一个div盒子

高和宽的像素值都设置成没有像素值，也就是0像素值

width:0px;height: 0px;

再将上方的圆角去掉

重点来了

接下来将上下左右的边框设置为10个像素值 给个颜色就会如下

----------------------------------------------------------------------

那当我们去掉右边框以及隐藏上下边框时

先删除掉右边框

将上下的边框改为隐藏

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

因为上方的div原因我们将图片做了点修改

并且放大观看效果

----------------------------------------------------------------------

这时候三角形已经出现了

聪明的小伙伴就知道接下来该怎么做了

那我也不费话

用li来做，然后悬浮起来 背景颜色改成左边div盒子

最后把左外边距调成负便好啦

不同方向的三角形删除对边，隐藏双边的边框即可

而不同角度大小的三角形通过改变存在的像素值即可做到

具体的欢迎小伙伴讨论提出问题哦

转自：双鱼站