使用CSS画一个实心三角形

首先我们先写一个宽高都为100px，带20px边框的div盒子

//html
<div>
</div>
//cssdiv {width: 100px;height: 100px;border-left: 20px solid red;border-right: 20px solid green;border-top: 20px solid #000;border-bottom: 20px solid blue;background-color: rgb(228, 231, 47);}

效果如图所示

下面让我们一步步把它变成三角形
1.将宽高设置为0（不能直接不设置，否则宽会与父级元素一样）
2.去除背景颜色

代码改成

 div {width: 0;height: 0;border-left: 20px solid red;border-right: 20px solid green;border-top: 20px solid #000;border-bottom: 20px solid blue;}

效果如图

3.将上下右的边框颜色改为transparent(透明)

div {width: 0;height: 0;border-left: 20px solid red;border-right: 20px solid transparent;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}

效果如图

到这里我们的三角形已经完成啦，如果想画一个尖角朝上的三角形，只需要把上左右的颜色改为transparent,以此类推

使用CSS画一个实心三角形相关推荐

[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...
用css画一个三角形
用css画一个三角形 HTML: <div id="delta"></div> CSS: #delta{width: 0;height: 0;border- ...
如何用CSS画一个三角形？
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
前端学习之路—用css画一个圆形，三角形，椭圆
用css画一个圆形,三角形,椭圆一.圆形 css代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...

使用CSS画一个实心三角形

使用CSS画一个实心三角形相关推荐

最新文章

热门文章