5
Chcę wyciąć lewy górny róg pola za pomocą CSS w ten sposób.Jak wyciąć pudełko Za pomocą CSS z przezroczystym tłem?
pamiętać, że tło jest przezroczyste.
A
Odpowiedz
4
Prawie takie samo rozwiązanie jak OriDrori's answer ale bardziej elastyczne (jeśli potrzeba stałej szerokości skróconych rogu).
Ten gradient będzie wyglądać tak samo niezależnie od .cardwidth i height.
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(135deg, transparent 20px, white 20px);
}<div class="card"></div>
6
Można użyć prostego linear gradient na to:
body {
background: purple;
}
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom right, transparent 5%, white 5%);
}<div class="card"></div>
2
Można użyć klipu-path https://developer.mozilla.org/en/docs/Web/CSS/clip-path
i używać coś takiego:
div#test{
\t background:red;
\t width:200px;
\t height: 200px;
\t -webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}<div id="test"></div>+0
Dzięki to woked –
+2
@AmirUrRehman Uwaga jednak, to rozwiązanie ma złe wsparcie przeglądarki (które sugerowałyby, Nick, zawsze dodać informacje o tym, kiedy opublikowania odpowiedzi, które nie przynajmniej krzyż praca wszystkie najnowsze przeglądarki) – LGSon
3
Z pseudo i transform można zrobić, i ma dobre wsparcie przeglądarki (od IE9)
body {
background: url(https://picsum.photos/400/300) center/cover;
}
div {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
left: calc(50% + 25px); /* 25px is height/width of the cut */
top: calc(50% + 25px);
width: 141.5%;
height: 141.5%;
transform: translate(-50%,-50%) rotate(45deg);
background: #eee;
opacity: 0.8;
}<div></div>Jak podkreślił, jeśli trzeba Aby skalować na różnych proporcjach, użyj tego
body {
background: url(https://picsum.photos/400/300) center/cover;
}
div {
position: relative;
width: 80vw;
height: 80vh;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1000%;
height: 5000%;
transform: rotate(45deg) translate(25px,-50%); /* 25px for the cut height/width */
transform-origin: left top;
background: #eee;
opacity: 0.8;
}<div></div>+0
Ta odpowiedź nie spełnia pierwotnego żądania użycia przezroczystego tła. Działa dobrze dla jednolitego koloru, ponieważ znajduje się na szczycie głównego elementu. –
+0
@NeilMonroe Ta odpowiedź działa nawet w przypadku obrazu z tyłu i/lub półprzezroczystego koloru na nakładce. Zobacz moją aktualizację. Czy miałeś na myśli coś innego? – LGSon
@LGSon, podobnie jak współrzędne boczne, prawy dolny i 135deg są równoważne tylko wtedy, gdy współczynnik proporcji kontenera wynosi 1: 1. Trudno jednak powiedzieć, który z nich jest lepszy, jeśli OP nie wskazuje, że zamierzał zachowywać się na elementach innych niż kwadratowe – vals