• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Button css - niestandardowe kształty

VPS Starter Arubacloud
0 głosów
717 wizyt
pytanie zadane 1 sierpnia 2017 w HTML i CSS przez thedaw Obywatel (1,810 p.)

Cześć,

Jak uzyskać taki efekt w css3

Chodzi mi dokładnie o prawą i lewą krawędź nachyloną pod kątem.

Z góry dzięki za pomoc :) 

3 odpowiedzi

+1 głos
odpowiedź 1 sierpnia 2017 przez Sherry Nowicjusz (240 p.)
edycja 1 sierpnia 2017 przez Sherry
<button><span>CLICK ME</span></button>
button {
  background: linear-gradient(#ec5e5c, #b22c35);
  transform: skew(-20deg);
  padding: 20px;
  color: #fff;
  border-radius: 10px;
}

button span {
  display: block;
  transform: skew(20deg);
}

O takie cuś. :)

komentarz 1 sierpnia 2017 przez radek024 Szeryf (77,160 p.)

Span + display: block to trochę zły pomysł ;) 

komentarz 1 sierpnia 2017 przez Sherry Nowicjusz (240 p.)
Tak na szybko, aby napis pozostał w pionie. Jaki masz lepszy pomysł? :)
komentarz 1 sierpnia 2017 przez radek024 Szeryf (77,160 p.)
Pseudoelementy - napisałem o tym w osobnym komentarzu ;)
0 głosów
odpowiedź 1 sierpnia 2017 przez JayJay Mądrala (6,020 p.)
0 głosów
odpowiedź 1 sierpnia 2017 przez radek024 Szeryf (77,160 p.)

Tutaj omawiam pseudoelementy oraz pseudoklasy. Nierówne krawędzie można wykonać za pomocą pseudobloków, co omawiam pośrednio w artykule ;) 

komentarz 1 sierpnia 2017 przez jvrekk Użytkownik (970 p.)

Ja nierówne krawędzie różnych elementów wykonuje bardzo prosto za pomocą clip-path: polygon  wykorzystując ten szybki generator. Czy ta forma jest w jakimś sensie niepoprawna?

komentarz 1 sierpnia 2017 przez radek024 Szeryf (77,160 p.)

Clip path jest ok, ale jeżeli mają być to wyłącznie dwie nierówne krawędzie to osobiście myślę, że wykorzystanie pseudoelementów jest lepsze ze względu na większe wsparcie

Podobne pytania

+1 głos
2 odpowiedzi 373 wizyt
pytanie zadane 24 marca 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
0 głosów
1 odpowiedź 161 wizyt
pytanie zadane 26 czerwca 2020 w HTML i CSS przez gmcode Gaduła (3,140 p.)
0 głosów
1 odpowiedź 172 wizyt
pytanie zadane 22 kwietnia 2016 w HTML i CSS przez TheVirus Początkujący (480 p.)

92,786 zapytań

141,718 odpowiedzi

320,661 komentarzy

62,115 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...