semi - ¿Cómo hacer un fondo de triángulo CSS en un div sin usar borde e imagen?

semi circulo css

Question

Sé cómo crear triángulos con CSS con bordes y usando imágenes, pero en mi caso, me gustaría usar el color de fondo.

Quiero algo como esta imagen.

¿Alguien puede ayudarme?

Answer 1

El problema con la creación de triángulos utilizando bordes CSS es su inflexibilidad cuando se trata de estilo. Como tal, puedes usar un elemento relativamente completo en pseudo paso, proporcionando muchas más opciones de estilo:

Claro, usted puede hacer, por ejemplo:

Demo Fiddle

div{
    height:50px;
    width:50px;
    position:relative;
    overflow:hidden;
}
div:after{
    height:100%;
    width:100%;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    content:'''';
    display:block;
    position:absolute;
    left:-75%;
    background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
    background-size:cover;
}

Answer 2

Pruebe esta herramienta para generar la forma que desea: https://bennettfeely.com/clippy/ . Luego retoca el código de acuerdo a tus necesidades. Por ejemplo, así es como puedes obtener un triángulo:

-webkit-clip-path: polígono (50% 0%, 0% 100%, 100% 100%); ruta del clip: polígono (50% 0%, 0% 100%, 100% 100%);

Sin embargo, la asistencia no es la mejor, ya que solo es totalmente compatible con Firefox y no existe en Edge / IE, por lo que no se recomienda utilizarla en sitios web de producción.

Answer 3

Una alternativa es utilizar degradado lineal de fondo. El truco es establecer la dirección en la parte inferior derecha, establecer el primer rango como blanco (o transparente) y el segundo rango como el color que desea que sea el triángulo.

En el siguiente ejemplo, la primera mitad del fondo es blanco (de 0% a 50%) y la segunda mitad (de 50% a 100%) de color amarillo dorado.

.triangle {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}

<div class="triangle"></div>

Tenga en cuenta que esta propiedad solo es compatible con los navegadores modernos (IE 11+, FF 49+)