Rysowanie kształtu za pomocą CSS - css, css3, css-shapes

Nie jestem pewien, czy jest to możliwe, ponieważ chcę określonego kształtu, jak pokazano na obrazku poniżej w CSS.

Każda pomoc będzie doceniona

Odpowiedzi:

5 dla odpowiedzi № 1

Okrąg z białym tłem:

Tak, możesz zrobić z poniższym kodem. Tworzymy tylko prostokątne pudełko z div i pozycjonowanie okrągłego pudełka (za pomocą :before i border-radius) na górze po lewej stronie.

HTML:

<div class="shape"></div>

CSS:

.shape{
height: 100px; /* height of rectangular area */
width: 200px; /* width of rectangular area */
background: red;
margin-left: 50px; /* Just for demo */
}
.shape:before{
position: absolute;
content: "";
height: 100px; /* equal to height of box */
width: 100px; /* equal to height of box because we need a circle */
background: white;
border-radius: 50px; /* 50% of height/width to make a circle */
margin-left: -50px; /* equal to border-radius to move it left by that much */
}

Próbny

Okrąg z przezroczystym tłem (przy użyciu pseudo elementu):

HTML:

<div class="container">
<span class="shape"></span>
</div>

CSS:

.container{
height: 100px;
width: 100px;
background:red;
position:relative;
margin-top:100px;
margin-left:100px;
}
.shape{
width: 50px;
height: 100px;
top:0px;
left:-50px;
overflow:hidden;
position:absolute;
}
.shape:after{
content:"";
width: 100px;
height: 100px;
border-radius: 100px;
background:rgba(0,0,0,0);
position:absolute;
top:-40px;
left:-90px;
border:40px solid red;
}

Próbny

Okrąg z przezroczystym tłem (przy użyciu cienia pudełka):

(Kurtuazja King King)

CSS:

div {
width:300px;
height:200px;
overflow:hidden;
position:relative;
left:100px;
top:50px;
}
div:before {
content:"";
position:absolute;
top:0;
left:-100px; /* should be equal to height */
height:100%;
width:200px;/* should be equal to height */
border-radius:50%;
box-shadow:0 0 0 1000px red;
}

Próbny

Dodatkowa próbka: Dodatkowe próbki można znaleźć na stronie ten wątek.

---

2 dla odpowiedzi nr 2

Po prostu użyj a border-radius na zagnieżdżonym elemencie potomnym. Nie ma nic do wyjaśnienia, ponieważ kod jest dość prosty, więc myślę, że zrozumiesz to, mówiąc o tej linii, która jest ważna - border-radius: 0 50% 50% 0; to krótka ręka, w której wartości top-right i bottom-right są ustawione na 50%

Próbny

.wrap {
background: #CC0001;
height: 200px;
width: 600px;
}

.wrap .inner {
height: 200px;
width: 200px;
background: #fff;
border-radius: 0 50% 50% 0;
}

---

1 dla odpowiedzi nr 3

Możesz użyć dwóch div, jednego prostokąta czerwonego i drugiego białego nałożonego na 100% granicy css

Boder-radius W3School

---