CSS实现实心三角形和空心三角形[通俗易懂]

全栈程序员-站长 • 2022年6月29日上午9:16 • 未分类 • 阅读 29

CSS实现实心三角形和空心三角形[通俗易懂]一次开发中遇到，记录代码原理：1.给一个div，宽和高都为0的时候，盒子什么都没有看起来。为空白2.给一个宽高为0的盒子给一遍像素给100px的上边，下边和右边，border-top:90pxsolidred;border-right:100pxsolidblack;border-bottom:100pxsolidblue;这样左边没有，就会缩成一

大家好，又见面了，我是你们的朋友全栈君。

一次开发中遇到，记录代码

原理：

1.给一个div，宽和高都为0的时候，盒子什么都没有看起来。为空白

2.给一个宽高为0的盒子给一遍像素给100px的上边，下边和右边，

.jiao{ position: relative;  //box-sizing: border-box;  height: 0px;  width: 0px;  //border: 10px solid red;  border-top: 90px solid red;  border-right: 100px solid black;  border-bottom: 100px solid blue; }

这样左边没有，就会缩成一个点

效果： CSS实现实心三角形和空心三角形[通俗易懂]

这是当把上下边颜色都设置为透明色，就是一个实心定位三角形

.jiao{
  position: relative;  height: 0px;
  width: 0px;  border-top: 90px solid transparent;
  border-right: 100px solid black;
  border-bottom: 100px solid transparent;
}

效果

CSS实现实心三角形和空心三角形[通俗易懂]

这样一个实心的三角新就出来了，

空心的三角形呢同理，在当前的三角形后面添加一个一个实心三角形，然后将这个三角形绝对定位到当前三角行的位置切割

.jiao:after{
  content: '';
  position: absolute;
  top: -89px;
  left: 2px;
  border-top: 89px solid transparent;
  border-right: 99px solid #FFFFFF;
  border-bottom: 99px solid transparent;
}

效果：

CSS实现实心三角形和空心三角形[通俗易懂]

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148379.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

PyTorch：学习conv1D,conv2D和conv3D「建议收藏」

PyTorch：学习conv1D,conv2D和conv3D「建议收藏」背景CNN是深度学习的重中之重，而conv1D，conv2D，和conv3D又是CNN的核心，所以理解conv的工作原理就变得尤为重要。在本博客中，将简单梳理一下这三种卷积，以及在PyTorch中的具体实现。参考https://pytorch.org/docs/master/nn.html#conv1dhttps://pytorch.org/docs/master/nn.function…

全栈程序员-站长
2025年7月1日
2
笔试题(贪心)[通俗易懂]

笔试题(贪心)[通俗易懂]题解多余的数字每次都往左边分配，每次都分配剩余的再向右分配，向右分配不足的需要再从右边多余的数组分配过来，所以就搬动了2次#include<bits/stdc++.h>using namespace std;const long long N = 1e5 + 10;int a[N];int main(){ int n,sum = 0; cin>>n; for(int i = 0;i < n;i ++)cin>>a[i],sum..

全栈程序员-站长
2022年8月8日
4
华为上机练习题–姓名夫妻相「建议收藏」

华为上机练习题–姓名夫妻相

全栈程序员-站长
2022年1月30日
46
webpack json_vue读取json文件

webpack json_vue读取json文件方案删除webpack，重新装以前的版本。npmuninstallwebpacknpminstallwebpack@^4.0.0–save-dev

全栈程序员-站长
2022年8月9日
19
idea

eplan激活码破解步骤视频【中文破解版】

(eplan激活码破解步骤视频)本文适用于JetBrains家族所有ide，包括IntelliJidea，phpstorm，webstorm，pycharm，datagrip等。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码，破解教程可免费永久激活，亲测有效，上面是详细链接哦~C…

全栈程序员-站长
2022年3月26日
214
sqlmap命令详解pdf_SQLmap

sqlmap命令详解pdf_SQLmapsqlmap命令详解目录0x01sqlmap确定目标1.1直连数据库1.2URL探测1.3文件读取目标1.4Google批量扫描注入0x02sqlmap请求参数设置（一）2.1设置HTTP方法2.2设置POST提交参数2.3设置参数分割符2.4设置Cookie头2.5设置User-Agent头2.6设置Host头2.7设置Referer头2.8设置额外HTTP头2.9设置HTTP协议认证2.10设置HTTP代理0x03sql

全栈程序员-站长
2025年8月22日
3

发表回复

关注全栈程序员社区公众号