纯CSS实现边框三角

最新推荐文章于 2023-04-11 10:00:22 发布
VIP文章 最新推荐文章于 2023-04-11 10:00:22 发布
阅读量1.2k 收藏 6
点赞数
分类专栏： css 常见面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43410419/article/details/84674799
版权

边框三角的实现原理：

相连两条边框如果颜色不一样，就会出现一个斜角,，利用这个斜角，我们就可以轻松实现一个三角形

案例一：元素宽高300，边框宽度均为50，上下边框为黄色，左右边框为红色，需要实现一个朝上的三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name=
最低0.47元/天 解锁文章
碎碎。
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css制作带三角的边框(附效果图)
12-13
首先附上效果图： 以上的效果完全是用 css 来实现的，那么是怎么实现的呢？ 我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。 通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 复制代码代码如下:<!DOCTYPE HTML><html lang=”en-US”><head> <meta charset=”UTF-8″> <title>字符制作三角边框</title> <style type=”text/css”> *{margin:0;padding:0;} body{font-fa
纯CSS写带边框的三角形
11-26
纯CSS写带边框的三角形
使用css实现三角符号效果
12-11
关于使用css制作三角符号，网上有很多的例子了，在这里只是为了详细的向各位解释一下三角符号的原理 下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在css中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号 那么如何使用css的该属性来实现三角符号的效果呢，代码如下： html代码 <body> <div></div> </body> css代码 div:after{ position: absolute; width: 0px; height: 0px; content: " "; borde
CSS三角、界面样式(cursor、input输入边框不改变颜色、textarea拖拽不改变大小)、vertical-align、溢出文字省略号显示、CSS初始化
Bulut0907
11-08 1563
vertical-align的可选值为：1. bottom: 图片的底线和文字的底线对齐，2. baseline：默认，图片的底线和文字的基线对齐，3. middle: 图片的中线和文字的中线对齐，4. top：图片的顶线和文字的顶线对齐。不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，所以需要进行CSS初始化。当我们选择input输入框，进行文字输入的时候，边框会改变颜色。textarea默认可以在右下角进行拖拽，改变输入框的大小。CSS初始化参考如下。
html背景色两个角不同颜色三角,纯CSS实现页面的尖角、小三角、不同方向尖角的...
weixin_33256233的博客
06-21 312
效果图：方法一的效果图：方法二的效果图：方法三的效果图：方法1：因为有背景，所有实现起来比较方便，尖角的内部同个颜色就可以不用考虑遮挡问题html:带背景颜色的小三角实现是比较简单的！css#top{position:absolute;width:0px;height:0px;line-height:0px;/*为了防止ie下出现题型*/border-bottom:10pxsolid...
利用CSS制作三角形
woshileiyaohua的博客
08-08 149
目录前言代码 前言 前端工程师在开发页面的时候，经常会用到三角形之类的图形来丰富页面效果，下面一起来看一下三角形在CSS上怎么实现。 代码 设定div的宽高为100，我们会得到一个这样的图形 ...
css写三角形(边和背景一个色，边和背景不同色)
是一座岛
09-07 3654
1.效果图 边和背景不同色 实现思路：需要写两个三角形，一个边大三角形，一个边小三角形，边小的覆盖到边大三角形的上方。 代码： .circle{ width: 46px; height: 46px; border-radius: 50%; border: 1px solid #9
CSS实现三角形的四种方法
热门推荐
m0_60237095的博客
04-11 2万+
css三角形的实现
CSS 三角——带边框的三角
qq_64133626的博客
08-20 4724
值得注意的是，right 值右移的距离值是 border 的两倍，要想使三角的边框和 div 边框一致，需要使三角组合得到的边框像素和 div border 像素一致，如果 div border 是1px，那么大的三角形和小的三角形边框差就需要为1px，大三角移动的距离和小三角移动的距离差则为2px，多运行几次代码即可理解。可以使用伪元素 before 和 after来做，其效果就相当于在标签的内部放置一个最前或者最后的标签，添加的标签可以继承父元素的属性，那么通过伪元素就可以组装出带边框的小三角。
CSS利用边框实现三角形详解(上)
m0_57371966的博客
01-02 6074
利用CSS边框实现三角形，以及进阶技巧
纯CSS实现的小三角
12-09
先看图1效果：代码如下： <div xss=removed></div> ...上边框宽度是三角的高、边框颜色与背景色相同，下边框同上。左边框宽度与上下边框一样设置，颜色是三角的颜色，即红色。 这个Demo是几种常见三角的写法。
纯CSS3+DIV实现小三角形边框效果的示例代码
01-19
具体代码如下所示： ... <!--向上的三角--> ...--向下的三角-->...--向左的三角-->...下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border
CSS绘制三角形—border法
Icey_xuxuxu的博客
05-10 380
CSS绘制三角形—border法
CSS应用之画三角形（等腰、直角、正三角形）和提示框
Freya_yyy的博客
07-29 1901
1.用CSS实现一个三角形： 需要把元素的宽度、高度设置为0，然后为其设置边框。需要哪个边框设置哪个边框的颜色，相邻边框的颜色设置color为transparent，对应边框可以设置color为transparent也可以不设置。代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content...
CSS画实心三角形【格智网络科技 面试题】
new_Zym的博客
06-20 893
画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。但是在写div时，会发现，div是的边框是直线。那么，我想到，要是给div的高和宽设置为0，然后设置四个border不同的颜色，那么这个颜色会重叠覆盖么？ps：当然会想到设置padding或者margin值，但是这两种属性无法设置颜色。 #triangle02{ width: 0; height: 0; b
html5中使用外链式为div标签设置属性
大数据-攻城狮
12-07 1324
Document div{ width: 300px; height: 300px; /* 背景色 */ background-color: red; /* 边框 border */ /* 边框的粗细 实线 边框颜色 */ border-top: 10px solid green; bo
HTML+CSS-三角形的边框
cai_niao5623的博客
11-04 1164
首先用css制作一个三角形 <style> .triangle { width: 0; height: 0; border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid chocolate; border-left: 30px solid transp
利用递归实现深拷贝（常见面试题之一）
明知迷途，从未折返
11-04 1万+
浅拷贝和深拷贝的区别： 浅拷贝 ： 只是将数据中所有的数据引用下来，依旧指向同一个存放地址，拷贝之后的数据修改之后，也会影响到原数据的中的对象数据 深拷贝： 将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据 实现思路： 将要拷贝的数据 obj 以参数的形式传参 声明一个变量 来储存我们拷贝出来的内容 判断 obj 是否是引用类型数据，如果不是，则直接赋值即可（ 可以利用 ...
css实现边框灰色内部透明的三角形
最新发布
05-18
可以通过CSS的伪元素和边框属性来实现边框灰色内部透明的三角形。以下是一个例子： ```html <div class="triangle"></div> ``` ```css .triangle { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid gray; position: relative; } .triangle::before { content: ""; position: absolute; top: -20px; left: -20px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid white; } ``` 这个例子中，我们首先创建一个宽度和高度均为0的元素，并设置其上下边框和右边框的宽度为20px，颜色为灰色。接着，我们使用伪元素`::before`在三角形的左上角创建一个宽度和高度均为0的元素，并设置其上下边框和右边框的宽度为20px，颜色为白色。通过设置这个伪元素的位置，使其覆盖住了三角形的左上角，从而实现了内部透明的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值