[CSS] Problem ?

Question

Witam, mam kod css 

	right: 20px;
background: rgba(0,0,0,0.3);
padding: 10px 10px;
margin-top: 30px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg,);
-o-transform: skew(20deg);

I nie chciałbym takiego efektu [zdj nizej]

A chciałbym taki :

Comments

Wrzuć na codepen o wydaje mi się, że problemem nie tyle są same właściwości css co kwestia do jakich elementów je przypisujesz.

Answer 1

Proponuję utworzyć (pseudo)element jako tło i go przyciąć. Pseudoelementy możemy utworzyć w CSS-ie (:before i :after). Przykładowy kod:

.element {
  position: relative;
	color: #fff;
	padding: 20px;
	z-index: 0;
}

.element:before {
  content: '';
  position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

  background: #000;
  transform: skew(-20deg);
}

 

Comments

Dzięki :)