CSS写三角

Love The Way You Lie 2022-06-14 10:37 168阅读 0赞

### css写小三角 ###

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> .dot { width:0; height: 0; /*font-size: 0;*/ /*line-height: 0;*/ border-width: 10px; border-style: solid; /*必须设置，默认样式为none*/ /*border-bottom-style: solid;*/ border-top-color: red; border-bottom-color: pink; border-left-color: blue; border-right-color: yellow; } /*向下箭头*/ .top{ border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } /*向右箭头*/ .left{ border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; } /*向左箭头*/ .right{ border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; } /*向上箭头*/ .bottom{ border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } </style>
    </head>
    <body>
      <div class="dot top"></div>
      <div class="dot bottom"></div>
      <div class="dot left"></div>
      <div class="dot right"></div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 边框写三角箭头旋转

总是忘这个属性 transform: rotate(45deg); 记录一下 width: 20rpx; height: 20rpx; bor

男娘i/ 2023年01月23日 13:50/ 0 赞/ 4 阅读

相关 css 右边三角

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

素颜马尾好姑娘i/ 2022年09月05日 14:57/ 0 赞/ 202 阅读

相关 css三角制作的方法8.12

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

「爱情、让人受尽委屈。」/ 2022年09月04日 06:59/ 0 赞/ 160 阅读

相关 CSS制作三角边框

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>字符制作三角边

比眉伴天荒/ 2022年08月07日 13:35/ 0 赞/ 176 阅读

相关【CSS】css三角提示框

现在我们有一个需求，就是三角提示框像这样： ![Center][] 注意这个三角导航，我们需要达到这样的效果。第一种办法：现在有两种方案，第一种需要用到css3

「爱情、让人受尽委屈。」/ 2022年07月13日 11:54/ 0 赞/ 209 阅读

相关 CSS写三角

css写小三角 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT

Love The Way You Lie/ 2022年06月14日 10:37/ 0 赞/ 169 阅读

相关写倒三角

用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。基本原理原理非常简单，通过截取border(边框)的部分“拐角”实现，几行C

本是古典何须时尚/ 2022年06月02日 23:13/ 0 赞/ 195 阅读

相关纯 css 实现三角效果

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果： ![70][] 关于尺寸方面，自己看着来就行，无所谓的；

旧城等待，/ 2022年05月28日 07:25/ 0 赞/ 351 阅读

相关前端css倒三角设置方法

倒三角形：盒子宽高设为0px border设置合适的宽度，border-top设置颜色，其它透明便可 <!DOCTYPE html> <html lan

布满荆棘的人生/ 2022年03月16日 00:14/ 0 赞/ 545 阅读

相关 css 三角角标样式

.sanjiao { width: 0px; height: 0px; overflow: hidden; border

男娘i/ 2021年09月14日 01:10/ 0 赞/ 622 阅读