CSS实现三角形的四种方法
方法一：使用 border (常见)
【解释】不设置宽高，用边框大小控制三角型大小
【分解步骤】
设置一个
div不设宽高【示例】
<style>#triangle{width: 0;height: 0;border: 100px solid;border-color: orangered skyblue gold yellowgreen;}
</style>
2. 设置透明
- 留下想要指向方向相反的边框设定，其他方向的边框设为
transparent透明
【示例】实现指向向上的三角形
<style>.Up{width: 0;height: 0;border-top: 100px solid transparent; border-right: 100px solid transparent;border-left: 100px solid transparent;border-bottom: 100px solid orangered;}
</style>
【效果图】指向上，指向下，指向左，指向右
如何设置不同的三角形
- 可以通过调整不同方向边框的值来实现不同方向和大小的三角形
方法二：使用 linear-gradient
【解释】两色渐变，调为实色，一色透明
【分解步骤】
- 两色渐变
<style>.first{background: linear-gradient(45deg, deeppink, yellowgreen);}
</style>
- 调为实色
<style>.second{background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);}
</style>
- 一色透明
<style>.second{background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);}
</style>
【效果图】
如何设置不同的三角形
- 通过旋转
rotate或者scale，也能得到各种角度，不同大小的三角形
方法三：使用 clip-path
【解释】裁剪多边型的方式，创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
【示例】
<style>div{width: 100px;height: 100px;background: gold;clip-path: polygon(0 0, 0 100%, 100% 100%);}
</style>
clip-path：
- polygon(
x1y1，x2y2，x3y3)；
了解更多clip-path属性
【效果图】
如何设置不同的三角形
- 可以借助CSS clip-path maker
方法四：利用字符
<div class="one">► </div>
<div class="two">▼ </div>
<div class="three">▲ </div>
<div class="four">⊿ </div>
<div class="five">△ </div>
空心三角形如何实现：
当div元素嵌套时可设置出空心三角形或是带三角形的气泡框。实例如下：
实现的核心思想
空心三角形
注意：掩盖过程一般使用定位，容器设置为相对定位（不脱离文档流），三角形设置绝对定位。通过top,left,bottom,right调整位置即可。
这时为了达到掩盖效果，应使用z-index设置使背景色三角形能够掩盖另一个三角形。
本例实际可拆分为一个盒子和一个空心三角形。这时可同时设置before和after。各自设置好边框组成三角形相互掩盖即可达到效果。
气泡框：
<!DOCTYPE html>
<html lang="zn-ch">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSDN测试-实现带三角形的气泡框</title><style>.div{width:300px;height:300px;border: 10px solid #0082df;position: relative;}.div::after{content: "";position: absolute;right:60px;top:300px;width:0px;height:0px;border:30px solid transparent;border-top: 30px solid #0082df;}.div::before{content: "";position: absolute;top:295px;left:180px;z-index: 1;width:0px;height: 0px;border: 30px solid transparent;border-top:30px solid #fff; }</style>
</head>
<body><div class="div"></div>
</body>
</html>空心三角形：
<!DOCTYPE html>
<html lang="zn-ch">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSDN测试专用-实现空心三角形</title><style>.div{width:0px;height:0px;border: 100px solid transparent;border-bottom-color: #0082df;position: relative;}.div::after{content: "";position: absolute;right:-100px;top:-80px;width:0px;height:0px;border:100px solid transparent;border-bottom-color: #fff ;z-index: 2;}</style>
</head>
<body><div class="div"></div>
</body>
</html>CSS实现三角形的四种方法相关推荐
- CSS清除浮动的四种方法
CSS清除浮动的四种方法 第一种:使用div空标签法 第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
- 前端面试题：使用css生成田字格的四种方法
使用css生成田字格的四种方法 html结构 css基础样式 第一种 flex布局 第二种 绝对定位 第三种 css瀑布流 第四种 float浮动 html结构 <div class=" ...
- css画三角形的两种方法
css画三角形的两种方法 画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
- css实现三角形的6种方法
在一些面试经验中,经常能看到有关css的题目都会有一道如何使用css绘制三角形,而常见的回答通常也只有使用border进行绘制一种方法. 而css发展到今天,其实有很多有意思的仅仅使用css就能绘制出 ...
- css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用,并且得到了广泛的支持.该b ...
- CSS引入样式的四种方法及优先级顺序
CSS引入样式的几种方法 css可以通过4种方式引入样式表 根据不同的需求可以选择不同的引入方式 但是它们也有不同的优缺点 行内样式 嵌入式样式 外部样式 @import 导入的方式 1.行内样式 特 ...
- HTML和CSS隐藏元素的四种方法
第一种:display:none 特点:不占据屏幕空间 显示:display:block <!DOCTYPE html> <html lang="en">& ...
- css清除浮动的四种方法(详细)
浮动带来的影响 清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题 看下面一段代码 <div class="fater"><div class ...
最新文章
- tf.cast()数据类型转换
- leetcode 3. Longest Substring Without Repeating Characters
- Nginx（OpenResty）+Lua+Redis IP限流 10s内
- Android studio断开svn连接
- id 的选择器为什么要这么写 li#first？
- Bootstrap框架学习
- java接口对接——别人调用我们接口获取数据
- Linux内核的学习（二）
- 水题 Codeforces Beta Round #70 (Div. 2) A. Haiku
- Win7 64位 IIS未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项
- 2018美赛E题翻译
- WiFi共享大师 去广告
- LED 发光二极管压降
- 【测试用例练习】十、微信朋友圈点赞 和发红包 测试用例
- 快速上手五大技巧！自媒体新人创作攻略，想要通过拍视频赚钱
- 网站访问速度慢的排查方法
- You are currently rebasing branch ‘csindex/feature/index_info‘ on ‘d2ef4210a3‘.
- 连接手表_小米手表配对时间长、断开连接后一直连不上怎么办？
- 各种算法的优点与缺点
- C++学习（三十九）（C语言部分）之 游戏项目（2048游戏）