css3 凹角,【CSS】这种凹角用css3如何实现

回答：

Title

.outer{

position: absolute;

left: 100px;

top: 100px;

width: 300px;

height: 500px;

background-color: #0a6ebd;

display: flex;

justify-content: center;

align-items: center;

box-sizing: border-box;

border: 1px solid #0a6ebd;

}

.inner-1{

width: 250px;

height: 450px;

box-sizing: border-box;

background-color: #0da6ec;

position: relative;

display: flex;

justify-content: center;

align-items: center;

border: 1px solid red;

border-top-left-radius: 25px;

}

.inner-2{

width: 200px;

height: 400px;

box-sizing: border-box;

background-color: #00bcd4;

position: relative;

border: 1px solid red;

border-top-left-radius: 25px;

}

.left-corner{

width: 25px;

height: 25px;

/* border-radius: 100%; */

border-bottom-right-radius: 100%;

background-color: inherit;

position: absolute;

left: -1px;

top: -1px;

z-index: 10;

border-bottom: 1px solid red;

border-right: 1px solid red;

box-sizing: border-box;

}

回答：

css

#a {

width: 150px;

height: 300px;

background: radial-gradient(circle at top left,

transparent 15px, #e6e4b7 0) top left,

radial-gradient(circle at top right,

transparent 15px, #e6e4b7 0) top right,

radial-gradient(circle at bottom right,

transparent 15px, #e6e4b7 0) bottom right,

radial-gradient(circle at bottom left,

transparent 15px, #e6e4b7 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

padding: 20px 24px 22px 20px;

}

#b {

display: block;

background: radial-gradient(circle at top left,

transparent 15px, red 0) top left,

radial-gradient(circle at top right,

transparent 15px, red 0) top right,

radial-gradient(circle at bottom right,

transparent 15px, red 0) bottom right,

radial-gradient(circle at bottom left,

transparent 15px, red 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

width:100%;

height: 100%;

padding: 2px;

}

#b:before {

content: "";

width: 100%;

height: 100%;

display: block;

background: radial-gradient(circle at top left,

transparent 15px, #e6e4b7 0) top left,

radial-gradient(circle at top right,

transparent 15px, #e6e4b7 0) top right,

radial-gradient(circle at bottom right,

transparent 15px, #e6e4b7 0) bottom right,

radial-gradient(circle at bottom left,

transparent 15px, #e6e4b7 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

}

回答：

假设这个div id是a

#a {

width: 100px;

height: 300px;

background: radial-gradient(circle at top left,

transparent 8px, #e6e4b7 0) top left,

radial-gradient(circle at top right,

transparent 8px, #e6e4b7 0) top right,

radial-gradient(circle at bottom right,

transparent 8px, #e6e4b7 0) bottom right,

radial-gradient(circle at bottom left,

transparent 8px, #e6e4b7 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

}

具体参数自己调一下

回答：

border-radius?

回答：

如果大的背景是张图呢，凹角要看得到背景图