css闭合箭头DIV

喵喵喵~~~

于 2020-10-29 18:09:41 发布

阅读量185

点赞数

分类专栏： css css3 文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/qq_39376990/article/details/107993669

版权

css 同时被 2 个专栏收录

1 篇文章

订阅专栏

css3

1 篇文章

订阅专栏

本文详细介绍了如何利用CSS3的属性和技巧，创建出一款精美的闭合箭头效果。通过控制边框颜色和宽度，结合伪元素的选择器，可以实现不同方向的箭头，并且能够完美融入各种布局中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<style>
                    .test{
                        height:40px;
                        background:#a29576;
                        color:#fff;
                        position:relative;
                        width:40%;
                        text-align:center;
                        line-height:40px;
                        display: inline-block;
                        border-top-left-radius: 20px;
                        border-bottom-left-radius: 20px;
                    }
                    .test:after{
                        content:"";
                        position:absolute;
                        height:0;
                        width:0;
                        left:100%;
                        top:0;
                        border:20px solid transparent;
                        border-left: 20px solid #a29576;
                    }
                    .test2{
                        height:40px;
                        background:#a70202;
                        color:#fff;
                        position:relative;
                        width:40%;
                        text-align:center;
                        line-height:40px;
                        display: inline-block;
                        margin-left: 40px;
                        border-top-right-radius: 20px;
                        border-bottom-right-radius: 20px;
                    }
                    .test2:before{
                        content: "";
                        position: absolute;
                        height: 0;
                        width: 0;
                        left: -46px;
                        top: 0;
                        border: 20px solid transparent;
                        border-right: 26px solid #a70202;
                        border-top: 20px solid #a70202;
                        border-bottom: 20px solid #a70202;
                    }
                    
                </style>
                <div>
                    <div class="test"></div>
                    <div class="test2"></div>
                </div>