css如何绘制一个等边三角形

我们首先绘制出一个一般的三角形，那么代码应该是如此的

<body><div class="triangle"></div></body>.triangle {border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 40px solid lightblue;  width: 0px;height: 0px;}

对于等边三角形我们知道，高是边的sqrt(3)/2倍，所以如果高为40的话，两边就是差不多23
，所以我们可以得到

.triangle {border-left: 23px solid transparent;  border-right: 23px solid transparent;  border-bottom: 40px solid lightblue;  width: 0px;height: 0px;}
<body><div class="triangle"></div></body>

此时我们就可以得到一个等边三角形啦

css如何绘制一个等边三角形相关推荐

如何快速绘制一个等边三角形呢？
在初学CAD制图的时候,我们会练习绘制各种各样不同的CAD图形,其中就有三角形.而等边三角形是三角形中很特别的一种,它的三条边是等长的.若是没有直接绘制三角形的工具,那么该如何快速绘制一个等边三 ...
【CSS】绘制一个任意角度的扇形
现在有这样一个需求,我们要用html 和 css绘制这样一个图形(sry,这水印不知道咋去掉,o(╯□╰)o): 我们首先可能想到的就是先画三角形,然后使用border-radius,是的我也是这样想 ...
等边三角形的绘制。使用turtle库中的turtle.fd()函数和turtle.seth()函数绘制一个等边三角形。
# 程序练习题2.4 import turtle turtle.setup(650,350,200,200) turtle.penup() turtle.seth(-150) turtle.fd(15 ...
用python绘制叠加等边三角形_python 叠加等边三角形的绘制的实现
题目:使用turtle库绘制叠加等边三角形. 要分享: 屏幕应该是个叠加三角,一岗是一个分角.不是樽前爱惜身,佯狂难免假成真.曾因酒醉鞭名马,生怕情多累美人. 如何使用python turtle 画一 ...
html画等边三角形,前台面试：使用CSS画一个等边三角形
CSS是前台面试必考的内容,有时候会面试官会出题让你画少量基本图形.由于画图的过程中可以考察很多的CSS知识点.今天我们就和大家详情一个比较难得等边三角形. 思路是利使用三个div的边框来拼成一个三角 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
[css] 用CSS绘制一个红色的爱心
[css] 用CSS绘制一个红色的爱心 // 用过就给贴过来了.heart {position: relative;width: 100px;height: 90px;}.heart:before, ...
[css] 如何使用CSS绘制一个汉堡式菜单
[css] 如何使用CSS绘制一个汉堡式菜单比较常见的两种方法:利用元素自身.::before和::after伪元素绘制3个长宽一致的矩形,然后设定其y偏移值. 利用上下border和自身元素内容绘 ...

css如何绘制一个等边三角形

css如何绘制一个等边三角形相关推荐

最新文章

热门文章