创建圆头矩形

创建两端半圆的长方形

这里介绍创建一个两头半圆的横向矩形的方法，我称之为“圆头矩形”，就行下面这样。但是又不想给一个确定的高度值，或者说我想让圆头矩形可以自适应页面调整大小。

首先一个非百分之百宽度的div

其实一个盒子就够了，这里加入class=box的div是要让class=tiao的div水平居中

<div class="box">
    <div class="tiao">
    </div>
</div>

css样式

<style>
    .box {
        text-align: center
    }

    .tiao {
        width: 200px;
        display: inline-block;
        background: rgba(0, 0, 0, .7);
    }

    .tiao::before {
        content: '';
        display: inline-block;
        width: 20%;
        padding-top: 20%;
        margin-left: -10%;
        float: left;
        border-radius: 50%;
    }

    .tiao::after {
        content: '';
        display: inline-block;
        width: 20%;
        padding-top: 20%;
        margin-right: -10%;
        float: right;
        border-radius: 50%;
    }
</style>

创建两段圆形的形状的步骤

1 行内元素盒子tiao

• 一个具有初始宽度的行内元素，设置其宽度非100%，以下称tiao

2 设置tiao伪元素befor和after

• width和padding-top属性值设置为相同值，这个值决定了tiao形状的高度
• 背景颜色和条的别境颜色一致
• before元素margin-left为before元素width取负值的一般
• after元素margin-right为after元素width取负值的一般

3. Tips

1. tiao元素display属性设置其他值没有测试，以上设置为inline-block可以通过设置父元素box的text-align属性为center方便地实现tiao居中。
2. 这种实现背景色不支持半透明，否则会出现重叠，目前还没有想到解决办法

要求不那么严格的圆头矩形

当然非强迫症患者仍然有另一种可能，那就是直接设置border-radius属性的水平和垂直半径不相同即可。像下面这样：

代码

<style>
.box{
    background:#cbcbcb;
    width:50%;
    height:50px;
    border-radius:6%/50%;
    margin:0 auto;
}
</style>

<div class="box"></div>

Tips

这种方式写法简单，不断调试border-radius的水平和垂直方向上的取值达到满意的效果。