三边用css圆边设计，边角断开答案

【问题标题】：Design in css rounded border in three sides and one with disconnected corner三边用css圆边设计，边角断开
【发布时间】：2019-09-09 16:49:11
【问题描述】：

你能请我用css创建设计吗，可以在下面的链接中找到。

https://i.stack.imgur.com/DmiSr.png

【问题讨论】：

不幸的是，人们会不愿意为你做你的工作。我们在这里通过帮助您解决特定问题来帮助您自己完成工作。为任务付出一些努力，向我们展示你已经走了多远，然后付出一些努力来写下这个问题。

标签： css css-transitions

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以这样做。

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

【讨论】：