html div左边得圆角,html – div倾斜的侧面和圆角

Note: I am adding a separate answer because though the answers that I linked in comment seem to give a solution, this one is a bit more complex due to the presence of border also along with the border-radius.

可以使用以下部件创建形状：

>一个相对定位的主要容器元件.

>两个伪元素,大约是父元素宽度的一半.一个元素倾斜以产生倾斜的左侧而另一个元素不倾斜.

>偏斜的伪元素位于左侧,而普通元素位于容器元素的右侧.

>偏斜的伪元素只有顶部,左边和底部边框.省略右边框,因为它将位于形状的中间.对于未倾斜的伪元素,出于同样的原因避免使用左边界.

>偏斜伪元素的左边界比其他边界更厚一些,因为偏斜使边框看起来比实际更薄.

我还在片段中添加了悬停效果,以展示形状的响应特性.

.outer {

position: relative;

height: 75px;

width: 300px;

text-align: center;

line-height: 75px;

color: white;

text-transform: uppercase;

}

.outer:before,

.outer:after {

position: absolute;

content: '';

top: 0px;

height: 100%;

width: 55%;

background: purple;

border: 2px solid white;

border-left-width: 3px;

z-index: -1;

}

.outer:before {

left: 0px;

border-radius: 20px;

border-right: none;

transform: skew(20deg);

transform-origin: top left;

}

.outer:after {

right: 0px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

border-left: none;

}

/* Just for demo of responsive nature */

.outer{

transition: all 1s;

}

.outer:hover{

height: 100px;

width: 400px;

line-height: 100px;

}

body{

background: lightblue;

}

Call me back

优点：

>这种方法的一大优势是它提供了优雅的后备.也就是说,在非CSS3兼容的浏览器中,它看起来像带有圆角的普通按钮(并且没有倾斜的侧面).

>页面(或容器元素)背景不必是纯色.

>形状本身可以具有非纯色(即图像或渐变)作为背景.它需要一些额外的调整,但方法本身将保持不变.

在下面的代码片段中,我给每个组件添加了不同的颜色,以直观地说明如何实现形状：

.outer {

position: relative;

height: 75px;

width: 300px;

text-align: center;

line-height: 75px;

color: white;

text-transform: uppercase;

}

.outer:before,

.outer:after {

position: absolute;

content: '';

top: 0px;

height: 100%;

width: 55%;

background: purple;

border: 2px solid white;

border-left-width: 3px;

z-index: -1;

}

.outer:before {

left: 0px;

border-radius: 20px;

border-right: none;

transform: skew(20deg);

transform-origin: top left;

background: seagreen;

border-color: red;

}

.outer:after {

right: 0px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

border-left: none;

background: yellowgreen;

border-color: maroon;

}

/* Just for demo of responsive nature */

.outer{

transition: all 1s;

}

.outer:hover{

height: 100px;

width: 400px;

line-height: 100px;

}

body{

background: lightblue;

}

Call me back