Jak mam to zrobić w CSS3 / HTML5?
Czerwone tło jest tłem div. Wewnętrzna biel to inny element div, który będzie zawierał jakiś tekst.
Odpowiedzi:
2 dla odpowiedzi № 1Ponieważ masz już 2 kontenery, możesz użyć dwóch par pseudoelementów dla narożników, takich jak to:
.outer {
width: 120px;
background: #a08;
position: relative;
padding: 30px;
}
.inner {
height: 118px;
background: #fff;
border: 1px dashed #a08;
flex: 1;
}
.outer::before, .outer::after, .inner::before, .inner::after {
content: "";
width: 20px;
height: 20px;
background: #a08;
background-clip: padding-box;
border: 1px dashed #a08;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.outer::before {
top: 20px;
left: 20px;
}
.outer::after {
top: 20px;
right: 20px;
}
.inner::before {
bottom: 20px;
left: 20px;
}
.inner::after {
bottom: 20px;
right: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
1 dla odpowiedzi nr 2
Jest podobne pytanie tutaj z wieloma odpowiedziami, które powinny pomóc.