类似圆角外翻效果-三角形突出

最新推荐文章于 2024-06-03 20:07:27 发布

Mao.O

最新推荐文章于 2024-06-03 20:07:27 发布

阅读量1.1k

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_60155232/article/details/127145034

版权

使用CSS实现如下效果：

三角形任意位置突出，可以使用边框border来实现。

实现原理：

创建一个容器，高宽设为0，使之变成点。

四边再设置边框大小相同，颜色不同，效果如下：

代码如下：

<style>
    div{
        width: 0;
        height: 0;
        border-top:solid 30px pink;
        border-bottom: solid 30px blue ;
        border-left: solid 30px red ;
        border-right: solid 30px yellow;
    }
</style>
<body>
    <div></div>
</body>

当容器高宽为0变成点时，设置上边框，则出现尖头向下的三角，设置左边框，则出现尖头向右的三角，其余两边类似。

如果我们需要做到目标效果，则需要向下的三角即可，其他三边隐藏。

我们可以这样做

<style>
    div{
        width: 0;
        height: 0;
        border: solid 30px transparent ;
        border-top:solid 30px pink;
    }
</style>
<body>
    <div></div>
</body>

效果为：

我们可以通过修改边框宽度，修改三角形角度大小。

边框宽度越大，角度越小，反之亦然。例如：

当 border-top:solid 30px pink; 效果为：

当border-top:solid 60px pink;

得到这样的三角，我们就可以做目标效果了。

将此容器放到需要露出三角的其他容器中即可。

效果：

完整代码：

    <style>
        *{
            box-sizing: border-box;
        }
        .box{
            position: relative;
            width: 200px;
            height: 100px;
            background-color: lightpink;
            margin: 50px;
            border-radius: 50%;
            padding: 25px;
        }
        span{
            position: absolute;
            bottom: -39px;
            left: 40px;
            width: 0;
            height: 0;
            border: solid 20px transparent;
            border-top:30px lightpink solid;
        }
    </style>
</head>
 
<body>
    <div class="box">
        你好Tom!
       <span></span>
    </div>
</body>