使用border属性绘制三角形、五角星、心形

1. 绘制三角形

<p>直角三角形</p>
<section class="triangle1"><style>#triangle1 {width: 0;height: 0;border-right: 50px solid transparent; border-bottom: 50px solid red;}</style><div id="triangle1"></div>
</section><p>等腰三角形</p>
<section class="triangle2"><style>#triangle2 {width: 0;height: 0;border-bottom: 50px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}</style><div id="triangle2"></div>
</section><p>两个三角形叠加</p>
<section class="triangle3"><style>.triangle3 {position: relative;}#triangle3 {width: 0;height: 0;border-bottom: 50px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}#triangle3:after {content: '';display: block;width: 0;height: 0;position: absolute;top: 10px;left: 0;border-bottom: 50px solid #fff;border-left: 50px solid transparent;border-right: 50px solid transparent;}</style><div id="triangle3"></div>
</section>

效果如下：

2. 绘制梯形、菱形、平行四边形

<p>等腰梯形</p>
<section class="trapezoid"><style>#trapezoid {width: 40px;height: 0;border-bottom: 50px solid red;border-left: 30px solid transparent;border-right: 30px solid transparent;}</style><div id="trapezoid"></div>
</section><p>直角梯形</p>
<section class="trapezoid"><style>#trapezoid2 {width: 40px;height: 0;border-bottom: 50px solid red;border-right: 30px solid transparent;}</style><div id="trapezoid2"></div>
</section><p>菱形</p>
<section class="lozenge"><style>.lozenge {position: relative;}#lozenge {width: 50px;height: 50px;background: red;transform: rotate(45deg);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}</style><div id="lozenge"></div>
</section><p>平行四边形</p>
<section class="parallelogram"><style>#parallelogram {width: 80px;height: 50px;position: relative;background: red;transform: skew(-35deg);}/*#parallelogram:after {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;transform: skew(35deg);background: red;}*/</style><div id="parallelogram"></div>
</section>

效果：

3. 绘制五角星

<p>五角星</p>
<section class="wujiaoxing"><style>.wujiaoxing {position: relative;width: 0;height: 0;border-top: 36px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}#wujiaoxing:before {content: '';position: absolute;top: -37px;left: -49px;border-top: 36px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;transform: rotate(72deg);transform-origin: 50% 50%;}#wujiaoxing:after {content: '';position: absolute;top: -39px;left: -49px;border-top: 36px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;transform: rotate(144deg);transform-origin: 50% 50%;}</style><div id="wujiaoxing"></div>
</section><p>六角形</p>
<section class="liujiaoxing"><style>.liujiaoxing {position: relative;}#liujiaoxing {width: 0;height: 0;border-bottom: 80px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}#liujiaoxing:before {content: '';position: absolute;top: 25px;left: 0;border-top: 80px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}</style><div id="liujiaoxing"></div>
</section>

效果：

4.绘制心形

<p>心形</p>
<section class="heart"><style>.heart {position: relative;margin: 30px;width: 500px;height: 500px;}#heart {width: 100px;height: 100px;background: red;position: relative;transform: rotate(45deg);}#heart:before {content: '';width: 50px;height: 100px;position: absolute;left: -49px;top: 0;background: red;border-radius: 50px 0 0 50px;}#heart:after {content: '';width: 100px;height: 50px;position: absolute;left: 0;top: -49px;background: red;border-radius: 50px 50px 0 0;}</style><div id="heart"></div>
</section>

代码地址：利用border绘制图形

使用border属性绘制三角形、五角星、心形相关推荐

利用MATLAB绘制各种表白心形-跳动心形
利用MATLAB绘制各种表白心形♥ 跳动三维心形表白情人节必备面向工科屌丝男固定心形的各种画法见下面连接链接: https://blog.csdn.net/weixin_44044161/ar ...
利用MATLAB绘制各种表白心形-固定心形
利用MATLAB绘制各种表白心形♥ 第一种固定三维心形 f=@(x,y,z)(x.^2+ (9./4).*y.^2 + z.^2 - 1).^3 -x.^2.*z.^3 - (9./80).*y.^ ...
html css 画五角星,纯 CSS3 绘制图形（心形、五角星、六边形等）
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
一条python 语句绘制浪漫的心形图案-----附解释（七夕专供）
文章目录七夕也要好好学习列表表达式解释小结列表推导式 [* for i in *] 条件赋值语句 value = a if condition else b 七夕也要好好学习心形曲线函数1( ...
android绘制心形_Android自定义View系列（一）——打造一个爱心进度条
写作原因:Android进阶过程中有一个绕不开的话题--自定义View.这一块是安卓程序员更好地实现功能自主化必须迈出的一步.下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法.从自定义 ...
学生用计算机如何弄心形,电脑画图软件内如何绘制心形
电脑画图软件内如何绘制心形随着科技的发展,电脑已经成为人们日常生活中必不可少的工具,当我们在使用电脑中的画图软件时,如果想要画一颗心形的话,应如何操作呢?接下来就由小编来告诉大家. 具体如下: 1. ...
CSS - Tooltip-arrow 绘制三角形
问题:纯CSS实现bubble的三角形部分方法:使用border来绘制三角形:例如 1 .trangle { 2 width: 0; 3 border-color: transparent; 4 b ...
Php字符拼出心形,怎么用文字拼成心形？名字心形图案怎么做？文字拼成一个爱心怎么制作？告白图片制作...
昨天说明天就是七夕节了,那么今天呢~就是七夕啦,不过小编家乡那边不把七夕当情人节过的,反而是虚岁十五岁少年的成人礼,可隆重了呢~但是此刻不在老家的小编还是不能免俗的要把今天当成情人节啊,虽然是只单身汪 ...
css之图形大全菱形心形五角星太极三角形...
css之图形大全因为需要,所以整理出了一份全css的图形大全,供大家一起学习: 圆形: #circle {width: 100px;height: 100px;background: red;bor ...

使用border属性绘制三角形、五角星、心形

1. 绘制三角形

2. 绘制梯形、菱形、平行四边形

3. 绘制五角星

4.绘制心形

使用border属性绘制三角形、五角星、心形相关推荐

最新文章

热门文章