css - example - nav html

Fondo inclinado semitransparente

Question

Quiero crear un elemento html, por ejemplo, un div, que tiene el siguiente estilo:

• color de fondo semitransparente
• Bordes redondeados en todos los bordes.
• lado izquierdo de la div traza una linea recta
• lado derecho de la div traza una línea sesgada

Me gustaría crear esto solo en CSS y me pregunto si esto es posible. Hasta ahora se me ocurrieron dos enfoques diferentes que tienen sus propios inconvenientes y no son completamente suficientes. Puedes echar un vistazo a los de este violín:

https://jsfiddle.net/n4tecna3/

.one-side-skew-1,
.one-side-skew-2 {
  font-size: 20px;
  padding: 2%;
  background-color: rgba(220, 50, 255, 0.6);
  position: relative;
  display: block;
  border-radius: 4px;
  z-index: 2;
  color: #ffffff;
  margin-top: 30px;
}
.one-side-skew-2 {
  border-top-right-radius: 0px;
}
.one-side-skew-1:after {
  height: 100%;
  width: 20%;
  position: absolute;
  top: 0;
  left: 85%;
  display: inline-block;
  content: "";
  background-color: rgba(220, 50, 255, 0.6);
  -moz-transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  -o-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
  border-radius: 4px;
}
.one-side-skew-2:after {
  border-top: 1em solid rgba(220, 50, 255, 0.6);
  border-left: 0.25em solid rgba(220, 50, 255, 0.6);
  border-right: 0.25em solid transparent;
  border-bottom: 1em solid transparent;
  border-top-right-radius: 4px;
  left: 100%;
  display: inline-block;
  position: absolute;
  content: "";
  top: 0;
}
.container {
  width: 500px;
}

<div class="container">
  <div class="one-side-skew-1">
    <span class="inner-text">One Side Skew With Pseudo Element Skewed</span>
  </div>

  <div class="one-side-skew-2">
    <span class="inner-text">One Side Skew With Pseudo Element Border</span>
  </div>
</div>

Enfoque 1. .one-side-skew-1 usa un elemento div con bordes redondos y un pseudo-elemento sesgado, con bordes redondeados para crear en suma un elemento sesgado de un solo lado. Esto funciona muy bien siempre que el color de fondo sea sólido. Para fondos semitransparentes verás una superposición de colores feos donde se encuentran el elemento y su pseudo-elemento.

Enfoque 2. .one-side-skew2 usa un elemento div con un pseudo detrás que consiste solo de bordes. Es un poco raro pero se acerca al resultado deseado. Aún así, el derecho no parece tan suave como en el primer enfoque.

¿Alguien más tiene una buena solución para este problema solo en CSS? ¿O tendré que usar una solución alternativa con una imagen de fondo semitransparente para resolver esto?

Answer 1

Puede usar un pseudo elemento para todo el fondo y ocultar las partes desbordadas con la propiedad de desbordamiento en el elemento.

Esto evitará que los fondos de elementos y pseudo elementos se superpongan y permitirá fondos semitransparentes:

div {
  position: relative;
  width: 250px;
  font-size: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  padding: 1% 2%;
}
div:before {
  content: '''';
  position: absolute;
  top: 0; right: 0;
  width: 100%; height: 100%;
  background: rgba(220, 50, 255, 0.6);
  -webkit-transform-origin:100% 0;
  -ms-transform-origin:100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  border-radius: 4px 4px 6px;
  z-index: -1;
}


/** FOR THE DEMO **/body {background: url(''http://lorempixel.com/output/people-q-g-640-480-3.jpg'');background-size: cover;}

<div>content</div>