CSS - 複合佈局的圓角凹角

-2

首先，我知道有類似的問題可用（如Create concave corners in css），但它們並不真正覆蓋這種情況。CSS - 複合佈局的圓角凹角

這不是關於單個單元格/ div元素。

我有，將有內部的某些文本內容三個塊：

頂部中間中心塊（窄）
中等中間塊（屏幕寬）
底部中間中心塊（縮小）

基本上類似的橫（文本移除）：

外角（8）很直接，但我怎麼能實現那些內部的（4）？

來源

2016-08-19 msciwoj

你嘗試過這麼遠嗎？您需要發佈您的代碼，以便我們可以爲您提供幫助。 –

爲什麼不只是使用背景圖片。 – Andrew

見婁代碼，也許它需要一些調整，但這個想法是，你用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>

來源

2016-08-19 09:44:10

看起來或多或少是我想要的方式，但在代碼中，我希望只有一個「屏幕寬度」div而不是三個（左，中，右） - 這是可能的。內角也似乎不完全適合 – msciwoj

我不認爲有可能只有一個股利。邊界太多，你需要很多元素來製作這些邊界。不僅內在的東西，而且所有的東西............關於角落不完全適合的事實，這就是爲什麼我在我的答案中說：「也許它需要一些調整」。爲了讓它們完美配合，4個div的邊界需要更短，但是不存在「border-height」屬性。我想給你的代碼，這是你可以用CSS做的最好的代碼 –

只有三個div的變化，有點hacky但功能。使用僞元素，變換和內部盒子陰影。

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>

來源

2016-08-19 10:54:06 myf

CSS - 複合佈局的圓角凹角

回答

相關問題