椭圆框上加三角形

效果图如图所示:


image.png

关键代码:

css:
    <style>
        #demo{
            width: 100px;
            height: 30px;
            background-color: #abc;
            position: relative;
            border:4px solid #333;
            margin: 100px;
            border-radius: 20px;
        }
        #demo:after,#demo:before{
            border:solid transparent;
            content:'';
            height: 0;
            width: 0;
            position: absolute;
        }
        #demo:after{
            border-width: 11px;
            border-bottom-color: #abc;
            left:39px;
            top:-22px;
        }
        #demo:before{
            border-width: 14px;
            border-bottom-color: #333;
            left: 36px;
            top:-31px;
        }
    </style>    
html:
<body>
   <div id="demo">     
   </div>
</body>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,324评论 25 708
  • EXCEL小白的进阶之路 从16年3月申请的小号,到现在发表的微文,屈指可数,纠结于想要好的内容,好的页面排版,然...
    Rachelhaha阅读 1,494评论 0 0
  • 记得2007年我花钱去上了陈安之老师的成功学课程。他讲了很多的道理,但是其中让我印象最深刻的,竟然是关于提问。 他...
    飞扬读书阅读 208评论 0 1
  • 一、生涯三阶段 生存期(3-5年)->结束标志:经济独立 发展期(45岁左右)职业资产、本钱在发展。->结束标志:...
    佩芸说阅读 213评论 0 0
  • 我丢下了你 忘了你的名 然后努力地想要记起 却记得那皱着眉的眉间 弄疼了我的眼眸 名,却依然记不得。 现在 二十四...
    况家家阅读 531评论 3 2

友情链接更多精彩内容