まず、同様の質問があります（Create concave corners in cssなど）が、実際にこのような状況をカバーしているわけではありません。CSS - 複合レイアウトの丸みを帯びたくぼんだコーナー
これはsingle cell/div要素に関するものではありません。 （狭い）
Iは内部いくつかのテキストコンテンツを有するであろう三つのブロックを有します（狭い）
基本的にクロスのようなもの（テキストは削除）：
外側の角（8）は直線的ですが、どのように内側の角（4）を達成できますか？
は、多分それはいくつかの調整を必要とするが、考え方は、これはあなたが望むものである場合
は私に知らせて、それらの内側の境界線を作るためにpseudo-elementsを使用することで、怒鳴るのコードを参照してください
.colored {
background:yellow;
border:5px solid green;
width:100px;
height:100px;
box-sizing:border-box;
position:relative;
}
#content {
width:300px;
position:relative;
background:#000;
}
.top,.bottom { position:relative;margin:0 auto;clear:both}
.top { border-bottom:none}
.bottom { border-top:none}
.left { border-right:none}
.right { border-left:none;}
.colored.center { border:none;}
.left,.center,.right { float:left;}
.top { border-top-left-radius:10px;border-top-right-radius:10px;}
.bottom { border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.right { border-bottom-right-radius:10px;border-top-right-radius:10px;}
.left { border-bottom-left-radius:10px;border-top-left-radius:10px;}
.top:before {
position:absolute;
height:100%;
width:100%;
left:-100%;
top:5px;
content:"";
border-bottom-right-radius:10px;
border-right:5px solid green;
border-bottom:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.top:after {
position:absolute;
height:100%;
width:100%;
right:-100%;
top:5px;
content:"";
border-bottom-left-radius:10px;
border-left:5px solid green;
border-bottom:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.bottom:before {
position:absolute;
height:100%;
width:100%;
left:-100%;
bottom:5px;
content:"";
border-top-right-radius:10px;
border-right:5px solid green;
border-top:5px solid green;
z-index:9999;
box-sizing:border-box;
}
.bottom:after {
position:absolute;
height:100%;
width:100%;
right:-100%;
bottom:5px;
content:"";
border-top-left-radius:10px;
border-left:5px solid green;
border-top:5px solid green;
z-index:9999;
box-sizing:border-box;
}<div id="content">
<div class="top colored">
</div>
<div class="left colored">
</div>
<div class="center colored">
</div>
<div class="right colored">
</div>
<div class="bottom colored">
</div>
</div>は多かれ少なかれ私が欲しかったように見えますが、コードでは3つの代わりに1つの "screen-width" div（左、中央、右）が必要です。また、内側のコーナーは完全には適合しないようです – msciwoj
私はそれが1つだけのdivを持つことは可能だとは思わない。境界線があまりにも多い場合は、それらの境界線を作るために多くの要素が必要です。内側のものだけでなく、それらのすべてが............コーナーが完全に適合しないという事実に関して、それが私の答えで言った理由です：「それは多少の調整が必要かもしれません。それらが完全に収まるようにするには、4つのdivの境界線を短くする必要がありますが、境界線の高さはありません。私があなたに与えたコードは、CSSでできることは最高だと思います –
わずか3つのdivで、ビットはハッキーですが機能的です。擬似要素、変形、内側のボックスシャドーを使用します。あなたがこれまでに試してみました何
div {
background-color: #000;
min-height: 100px;
}
.center {
width: 100px;
margin: 0 auto;
}
.rounded {
border-radius: 20px;
border: 5px solid red;
}
.conc {
position: relative;
}
.conc::before,
.conc::after {
content: '';
position: absolute;
border: 5px solid red;
border-radius: 20px;
width: 25px;
height: 25px;
background-color: trnaspanret;
border-color: red transparent transparent;
z-index: 3;
box-shadow: white 0px 0px 0px 20px inset
}
.conc.bottom {
margin-bottom: -5px;
border-bottom: 0;
border-radius: 20px 20px 0 0
}
.conc.top {
margin-top: -5px;
border-top: 0;
border-radius: 0 0 20px 20px
}
.conc::before {
left: -35px;
}
.conc::after {
right: -35px;
}
.conc.top::before,
.conc.top::after {
top: 0px;
}
.conc.bottom::before,
.conc.bottom::after {
bottom: 0px;
}
.conc.bottom::before {
transform: rotate(135deg)
}
.conc.bottom::after {
transform: rotate(-135deg)
}
.conc.top::before {
transform: rotate(45deg)
}
.conc.top::after {
transform: rotate(-45deg)
}
.centerblinders {
position: relative;
}
.centerblinders::before,
.centerblinders::after {
content: '';
position: absolute;
width: 130px;
height: 20px;
background-color: #000;
left: 50%;
transform: translatex(-50%);
z-index: 2;
}
.centerblinders::before {
top: -15px;
}
.centerblinders::after {
bottom: -15px;
}<div class="rounded center conc bottom"></div>
<div class="rounded centerblinders"></div>
<div class="rounded center conc top"></div>
？私たちがあなたを助けるためにあなたのコードを投稿する必要があります。 –
背景画像を使用しないでください。 – Andrew