CSS写三角

Love The Way You Lie 2022-06-14 10:37 243阅读 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 条评论，243人围观）

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

相关阅读

相关 CSS三角强化的巧妙运用（HTML、CSS）

CSS三角强化的巧妙运用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

╰半橙微兮°/ 2023年10月03日 13:16/ 0 赞/ 16 阅读

相关 css实现小三角

在很多地方我们可以用得上小三角，接下来我们画一下四个方向的三角形 triangle { / 基础样式 / border: solid 10p

不念不忘少年蓝@/ 2023年07月19日 03:40/ 0 赞/ 1 阅读

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

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

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

相关 css 右边三角

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

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

相关 CSS制作三角边框

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

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

相关【CSS】css三角提示框

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

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

相关 CSS写三角

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

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

相关写倒三角

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

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

相关纯 css 实现三角效果

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

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

相关 css 三角角标样式

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

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