在 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>