CSS常用样式——绘制各种角度的三角形（1）

最新推荐文章于 2022-08-05 21:20:29 发布

程序员学院

最新推荐文章于 2022-08-05 21:20:29 发布

阅读量385

点赞数

分类专栏： CSS3 文章标签： css css3 html

本文链接：https://blog.csdn.net/ccycuio/article/details/108398981

版权

本文介绍了如何使用CSS来创建各种角度的三角形，包括上、下、左、右以及角落方向的三角形。通过将元素的width和height设置为0，并利用边框颜色透明和不透明的组合，可以实现不同方向的三角形效果。

摘要由CSDN通过智能技术生成

作者：程序员学院
官方网址：https://www.chengxuyuan.com

1. 前言

在制作前端项目时，我们经常会遇到制作下拉功能时有个小三角，除了我们用图片背景或者iconFont之外，我们可以用CSS来实现。

2. 实现原理

首先我们制作一个正常的模块，添加不同颜色的边框来看下吧！

在这里插入图片描述

HTML代码:

<div class="demo_0"></div>

CSS代码:

.demo_0 {
   
	width: 100px;
	height: 100px;
	margin: 100px auto;
	border: 20px solid transparent;
	border-color: black blue chocolate coral
}

我们会发现每个边框给我们呈现出的是一个有棱角的四边形的渲染效果，接下来我们把这个模块的width和height都设为0，看下效果：

在这里插入图片描述
CSS代码：

.demo_0 {
   
	width: 0;
	height: 0;
	margin

关注

专栏目录