먼저 비슷한 질문을 사용할 수 있습니다 (예 : Create concave corners in css).하지만이 상황을 실제로 다루지는 않습니다.CSS - 복합 레이아웃을위한 둥근 모양의 오목한 모서리
이것은 단일 셀/div 요소에 관한 것이 아닙니다. (좁은)
나는 내부의 텍스트 내용을 것 세 가지 블록이 크로스 같은
는 기본적으로 뭔가를 (좁은) (텍스트 제거) :
외부 모서리 (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 가지 (왼쪽, 가운데, 오른쪽) 대신 하나의 "화면 너비"div 만 갖고 싶습니다. 또한 내부 모서리가 완벽하게 맞지 않는 것 같습니다. – msciwoj
div가 하나만 있다고 생각하지 않습니다. 국경이 너무 많아 국경을 만들기 위해서는 많은 요소가 필요합니다. 내면의 것들뿐 아니라 모든 것들 ............ 모서리가 완벽하게 맞지 않는다는 사실에 관해서, 나는 그 대답에 "어쩌면 조정이 필요할 것"이라고 말했다. 그것들을 완벽하게 맞추기 위해서는 4 개 div의 경계가 더 짧아야하지만 'border-height'속성은 없습니다. 내가 준 코드는 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