在 css 中设计三个边的圆角边框,一个边角断开
Design in css rounded border in three sides and one with disconnected corner
请问我可以在 css 中创建设计吗,可在下面的 link.
中找到
https://i.stack.imgur.com/DmiSr.png
你可以这样做。
.container {
width: 100px;
height: 50px;
background: #FFF;
border-radius: 10px;
border: 1px solid #000;
position: relative;
float: left;
margin: 5px;
font-size: 10px;
line-height: 25px;
text-align: center;
}
.contentsTop {
width: 100%;
height: 25px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.contentsBottom {
width: 100%;
height: 24px;
position: absolute;
left: 0px;
top: 25px;
border-top: 1px solid #000;
z-index: 1;
}
.hideCorner {
height: 10px;
width: 10px;
background: #FFF;
position: absolute;
}
.top-left {
top: 0px;
left: 0px;
}
.top-right {
top: 0px;
right: 0px;
}
.bottom-left {
bottom: 0px;
left: 0px;
}
.bottom-right {
bottom: 0px;
right: 0px;
}
<div class="container">
<div class="hideCorner top-left"></div>
<div class="contentsTop">TOP LEFT</div>
<div class="contentsBottom">TOP LEFT</div>
</div>
<div class="container">
<div class="hideCorner top-right"></div>
<div class="contentsTop">TOP RIGHT</div>
<div class="contentsBottom">TOP RIGHT</div>
</div>
<div class="container">
<div class="hideCorner bottom-left"></div>
<div class="contentsTop">BOTTOM LEFT</div>
<div class="contentsBottom">BOTTOM LEFT</div>
</div>
<div class="container">
<div class="hideCorner bottom-right"></div>
<div class="contentsTop">BOTTOM RIGHT</div>
<div class="contentsBottom">BOTTOM RIGHT</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.upperdiv {
width: 200px;
height: 80px;
border: 1px solid;
border-radius: 25px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.upperdiv::before {
position: absolute;
padding: 2em;
border-radius: 50%;
content: '';
background: white;
}
.TL::before {
margin: -28px;
padding: 2em;
}
.TR::before {
margin: -28px;
margin-left: 167px;
}
.lowerdiv {
width: 200px;
height: 80px;
border: 1px solid;
border-radius: 25px;
border-top: 0px solid;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.lowerdiv::before {
position: absolute;
padding: 2em;
border-radius: 50%;
content: '';
background: white;
}
.BR::before {
margin: -28px;
margin-top: 45px;
margin-left: 167px;
}
.BL::before {
margin: -28px;
margin-top: 45px;
margin-left: -33px;
}
.container {
margin: 3em;
display: inline-block;
}
</style>
<body>
<div class="container">
<div class="upperdiv TL"></div>
<div class="lowerdiv"></div>
</div>
<div class="container">
<div class="upperdiv TR"></div>
<div class="lowerdiv"></div>
</div>
<div class="container">
<div class="upperdiv"></div>
<div class="lowerdiv BR"></div>
</div>
<div class="container">
<div class="upperdiv"></div>
<div class="lowerdiv BL"></div>
</div>
</body>
</html>
请问我可以在 css 中创建设计吗,可在下面的 link.
中找到https://i.stack.imgur.com/DmiSr.png
你可以这样做。
.container {
width: 100px;
height: 50px;
background: #FFF;
border-radius: 10px;
border: 1px solid #000;
position: relative;
float: left;
margin: 5px;
font-size: 10px;
line-height: 25px;
text-align: center;
}
.contentsTop {
width: 100%;
height: 25px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.contentsBottom {
width: 100%;
height: 24px;
position: absolute;
left: 0px;
top: 25px;
border-top: 1px solid #000;
z-index: 1;
}
.hideCorner {
height: 10px;
width: 10px;
background: #FFF;
position: absolute;
}
.top-left {
top: 0px;
left: 0px;
}
.top-right {
top: 0px;
right: 0px;
}
.bottom-left {
bottom: 0px;
left: 0px;
}
.bottom-right {
bottom: 0px;
right: 0px;
}
<div class="container">
<div class="hideCorner top-left"></div>
<div class="contentsTop">TOP LEFT</div>
<div class="contentsBottom">TOP LEFT</div>
</div>
<div class="container">
<div class="hideCorner top-right"></div>
<div class="contentsTop">TOP RIGHT</div>
<div class="contentsBottom">TOP RIGHT</div>
</div>
<div class="container">
<div class="hideCorner bottom-left"></div>
<div class="contentsTop">BOTTOM LEFT</div>
<div class="contentsBottom">BOTTOM LEFT</div>
</div>
<div class="container">
<div class="hideCorner bottom-right"></div>
<div class="contentsTop">BOTTOM RIGHT</div>
<div class="contentsBottom">BOTTOM RIGHT</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.upperdiv {
width: 200px;
height: 80px;
border: 1px solid;
border-radius: 25px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.upperdiv::before {
position: absolute;
padding: 2em;
border-radius: 50%;
content: '';
background: white;
}
.TL::before {
margin: -28px;
padding: 2em;
}
.TR::before {
margin: -28px;
margin-left: 167px;
}
.lowerdiv {
width: 200px;
height: 80px;
border: 1px solid;
border-radius: 25px;
border-top: 0px solid;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.lowerdiv::before {
position: absolute;
padding: 2em;
border-radius: 50%;
content: '';
background: white;
}
.BR::before {
margin: -28px;
margin-top: 45px;
margin-left: 167px;
}
.BL::before {
margin: -28px;
margin-top: 45px;
margin-left: -33px;
}
.container {
margin: 3em;
display: inline-block;
}
</style>
<body>
<div class="container">
<div class="upperdiv TL"></div>
<div class="lowerdiv"></div>
</div>
<div class="container">
<div class="upperdiv TR"></div>
<div class="lowerdiv"></div>
</div>
<div class="container">
<div class="upperdiv"></div>
<div class="lowerdiv BR"></div>
</div>
<div class="container">
<div class="upperdiv"></div>
<div class="lowerdiv BL"></div>
</div>
</body>
</html>