有趣生活

当前位置:首页>职场>css动态计算百分比(用CSS画一个等边三角形)

css动态计算百分比(用CSS画一个等边三角形)

发布时间:2024-01-24阅读(6)

导读css是前端面试必考的内容,有时候会面试官会出题让你画一些基本图形。因为画图的过程中能考察很多的CSS知识点。今天我们就和大家介绍一个比较难得等边三角形。思....

css动态计算百分比(用CSS画一个等边三角形)(1)

css是前端面试必考的内容,有时候会面试官会出题让你画一些基本图形。因为画图的过程中能考察很多的CSS知识点。今天我们就和大家介绍一个比较难得等边三角形。

思路是利用三个div的边框来拼成一个三角形,只需要调整好左右两个div边框的旋转角度,就能生成一个等边三角形。可以使用三个div来实现,也可以借助伪类来实现三个div的效果。代码如下:

// css.box{ border-bottom:1px solid #030303; width:100px; height:100px; margin: 0 auto; box-sizing: border-box; position: relative; } .box:before,.box:after{ content:""; display: block; width:100px; height:100px; box-sizing: border-box; position: absolute; } .box:before{ border-left:1px solid #030303; transform-origin: left bottom; transform: rotate(30deg); } .box:after{ border-bottom:1px solid #030303; transform: rotate(60deg); transform-origin: right bottom; }//html<div ></div>

css动态计算百分比(用CSS画一个等边三角形)(2)

等边三角形

欢迎分享转载→http://www.youqulife.com/read-235869.html

Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图