美文网首页
疑问框,css 矩形两边挖半圆

疑问框,css 矩形两边挖半圆

作者: 吴乐要奋斗 | 来源:发表于2019-11-21 16:15 被阅读0次

<div class="rectangle">疑问框</div>
css:
/圆角矩形/
.rectangle{
width: 200px;
border-radius: 15px;
position: relative;
}
/小三角/
.rectangle::before{
content: "";
width: 0;
height: 0;
border: 15px solid red;
border-color: red transparent transparent transparent;
position:absolute;
bottom: -30px;
left: 40px;
}

css 矩形两边挖半圆

css:
.bound{
background-color: #3EAAF2;
width: 300px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;//设置定位
}
.bound::before{
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
background: #fff;
position: absolute;
top:50%;
left: -20px;
transform:translateY(-50%);
}
.bound::after{
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
background: #fff;
position: absolute;
top:50%;
right: -20px;
transform:translateY(-50%);
}

相关文章

  • 疑问框,css 矩形两边挖半圆

    疑问框 css:/圆角矩形/.rectangle{width: 200px;border-radius: 15px...

  • css实现漂亮的卡片样式,半圆效果

    css实现漂亮的卡片样式,卡券两端半圆缺口效果 最近项目中遇见了需要在矩形两端挖半圆的卡券设计,一般我们在设计飞机...

  • CSS 系列-如何画一个半圆?

    在日常使用 CSS 的过程中,我们经常会遇到非常多种的需求,例如对话框,画三角形,画半圆,圆角矩形,阴影,图文列表...

  • 基础篇 svg 形状

    关于矩形 有个疑问:为什么展示不全呢? style 属性用来定义 CSS 属性CSS 的 fill 属性定义矩形的...

  • CSS葵花宝典——盒模型

    CSS假定每个元素都会生成一个或者多个矩形框,这称为元素框(规范的将来版本可能允许非矩形框,不过对现在来说,框都是...

  • css伪类实现矩形缺半圆

  • 半圆角矩形

    有时候我们做项目的时候,会遇到个不同的视图,比如半圆角矩形 这样的视图我们改如何做呢?最为简单的方法就是先做一个圆...

  • CSS定位

    CSS position 属性1.static(静态) 描述:元素框正常生成。块级元素生成一个矩形框,作为文...

  • CSS定位

    CSS position 属性 1.static(静态) 描述:元素框正常生成。块级元素生成一个矩形框,作为文档流...

  • CSS学习5(视觉表现模型)

    基本框 CSS假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区(content are...

网友评论

      本文标题:疑问框,css 矩形两边挖半圆

      本文链接:https://www.haomeiwen.com/subject/veytwctx.html