Autor Zpráva
S3RIO2
Profil
Ahoj,

mohl by prosím někdo zkušenější než já poradit, jak skrze CSS3 vyřešit zkosení rohu v případě, že na background je použitý přechod?

Aktuální kód:

aside#left > h3 {
  background: #9ac859;
  background: -moz-linear-gradient(top,  #9ac859 0%, #8dc357 50%, #80c055 100%);
  background: -webkit-linear-gradient(top,  #9ac859 0%,#8dc357 50%,#80c055 100%);
  background: linear-gradient(to bottom,  #9ac859 0%,#8dc357 50%,#80c055 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ac859', endColorstr='#80c055',GradientType=0 );
  color: #140140;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0px 0px 0px 10px;
  margin: 0px;
  font-size: 15px;
  font-weight: bold;
}

Má představa finálního výsledku:

Tomáš123
Profil
S3RIO2:
Ak má byť chýbajúci roh rovnakej farby, radšej tam napoziciuj pootočený nakreslený útvar.

Metódu na skosenie takejto časti prvku nepoznám.
S3RIO2
Profil
Tomuto prasáckému řešení, bych se právě velice rád vyhnul. :-D
Keeehi
Profil
S3RIO2:
To není prasácké řešení ale funkční řešení se skvělou podporou.

Z tvého pohledu čistější řešení bude clip-path, ovšem s mnohem horší podporou.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: