css实现三角形的6种方法

在一些面试经验中，经常能看到有关css的题目都会有一道如何使用css绘制三角形，而常见的回答通常也只有使用border进行绘制一种方法。

而css发展到今天，其实有很多有意思的仅仅使用css就能绘制出来的三角形的方式，本文将展示6中使用css绘制三角形的方式，而且它们都很好掌握。

当然本文是抛砖引玉，css日新月异，可能还有一些有意思的方法本文遗漏了，欢迎大家在留言区补充。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实现三角形的6种方法</title><style type="text/css">#border {border-top: 50px solid greenyellow;border-bottom: 50px solid deeppink;border-left: 50px solid bisque;border-right: 50px solid chocolate;height: 0;width: 0;}#lg {width: 100px;height: 100px;background: linear-gradient(45deg, deeppink, deeppink 50%, yellow 50%, yellow 100%);}#cg {width: 100px;height: 100px;background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);}#triangle {width: 150px;height: 100px;position: relative;overflow: hidden;}#triangle:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: deeppink;transform-origin: right top;transform: rotate(45deg);}#clip {width: 100px;height: 100px;background: deeppink;clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);}.normal{font-size: 100px;color: deeppink;}/* 改变字体效果不一样 */.n1{font-family: "agency fb";}.n2{font-family: "arial, helvetica, sans-serif";}.n3{font-family: "bodoni mt black";}.n4{font-family: "calisto mt";}.n5{font-family: "engravers mt";}.n6{font-family: "french script mt";}</style></head><body><p>1. 使用border绘制三角形</p><div id="border"></div><p>2. 使用linear-gradient绘制三角形</p><div id="lg"></div><p>3. 使用conic-gradient绘制三角形</p><div id="cg"></div><p>4. transform:rotate配合overflow:hidden绘制三角形</p><div id="triangle"></div><p>5. 使用clip-path绘制三角形</p><div id="clip"></div><p>6. 利用字符绘制三角形</p><div class="normal n1">◄</div><div class="normal n2">►</div><div class="normal n3">▼</div><div class="normal n4">▲</div><div class="normal n5">⊿</div><div class="normal n6">△</div></body>
</html>

效果图如下

css实现三角形的6种方法相关推荐

css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
html+css实现三角形的三种方法
一.淘宝网的三角形实现 <!DOCTYPE html> <html><head><meta charset="utf-8" />&l ...
CSS实现三角形的四种方法
方法一:使用 border (常见) [解释]不设置宽高,用边框大小控制三角型大小 [分解步骤] 设置一个div不设宽高 [示例] <style>#triangle{width: 0;he ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
CSS画心形的三种方法，超级简单
CSS画心形的三种方法,超级简单一.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素首先,我们在页面上先写出一个div 使用CSS,将这个div变为一个橘红色的正方形: 接着我们 ...
css画心形原理,CSS画心形的三种方法
下面,介绍三种CSS画心形的方法.实现过程都非常简单,保证你一看就会. 1.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素. 首先,我们在页面上先写出一个div: 使用CSS,将这 ...
java 实现写出倒立三角形的几种方法
java 实现倒立三角形的几种方法: 我是一名java小小小小白,没什么事突发奇想发现自己曾经之前记得交过c++的一个老师给我们深入讲过for循环,当时还让我们进行练习打印倒立三角形,当时在学校期间学 ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...

css实现三角形的6种方法

css实现三角形的6种方法相关推荐

最新文章

热门文章