css设置div斜角,是否可以在CSS中创建一个斜角？

使用CSS：

确切的形状可以使用CSS实现。想法是在border-radius左上角有一个带有的元素，使其沿Y轴倾斜，然后将其放置在矩形的前面。这样做将使矩形元素看起来像在顶部具有一个带有一个弯曲边缘的三角形切口。

如果形状的内部只有一种颜色(纯色或透明)，则仅使用一种元素即可实现。但是，如果需要在形状内添加图像(如所提到的那样)，则我们需要多个元素，因为我们必须反转skew对图像的效果，而没有子元素就无法完成。

.shape,

.shape-image {

position: relative;

height: 150px;

width: 400px;

border-bottom: 2px solid crimson;

overflow: hidden;

}

.shape:before,

.shape:after,

.shape-image:after {

position: absolute;

content: '';

top: 0px;

height: 100%;

z-index: -1;

}

.shape:before,

.shape-image .before {

left: 0px;

top: -2px;

width: 50px;

border: 2px solid crimson;

border-width: 3px 0px 0px 2px;

border-top-left-radius: 8px;

transform-origin: right bottom;

transform: skewY(-45deg);

}

.shape:after,

.shape-image:after {

left: 52px;

width: calc(100% - 54px);

border: 2px solid crimson;

border-left: none;

}

.shape:after,

.shape:before {

background: aliceblue;

}

.shape.semi-transparent:after,

.shape.semi-transparent:before {

background: rgba(150, 150, 150, 0.5);

}

.shape-image .before {

position: absolute;

top: 0px;

height: 100%;

overflow: hidden;

}

.shape-image .before .img {

height: 100%;

width: 100%;

border-top-left-radius: 8px;

background: url(http://lorempixel.com/400/150);

transform-origin: right bottom;

transform: skewY(45deg);

}

.shape-image:after {

background: url(http://lorempixel.com/400/150);

background-position: -50px 0px;

}

/* Just for demo */

body{

background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);

}

.shape{

margin: 10px;

}

使用SVG：

另外，如下面的代码片段所示，使用SVG可以更轻松地实现相同的目的。

.vector {

height: 150px;

width: 410px;

padding-left

}

svg {

height: 100%;

width: 100%;

}

path {

stroke: crimson;

stroke-width: 2;

fill: none;

}

polygon {

fill: url(#bg);

}

/* Just for demo */

body {

background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);

}

Original Image