Articles of css shapes

Segmentos en un círculo usando CSS3

Sé que puedes hacer un círculo en CSS3 usando el hack de radio de borde. Pero, ¿hay alguna forma de hacer que tengan segmentos como esta imagen? ¿Hay alguna forma de hacerlo a través de HTML y CSS pero no de JS?

Sesgo de transformación de CSS3

¿Alguien sabe cómo lograr un sesgo como este? ¿Usando la nueva propiedad de transformación de CSS? Como pueden ver, estoy tratando de sesgar ambas esquinas, ¿alguien sabe si esto es posible?

Crear un menú radial en CSS

¿Cómo creo un menú que se parece a esto … Enlace a PSD No quiero usar las imágenes de PSD. Preferiría usar icons de algún paquete como FontAwesome y tener los fondos / css generados en CSS. Aquí puede encontrar una versión del menú que está usando el PSD para generar imágenes de la información […]

¿Cómo dibujar un sector circular en CSS?

Bueno, dibujar un círculo con CSS puro es fácil. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } ¿Cómo dibujo un sector? Dado un grado X [0-360], quiero dibujar un sector de X grados. ¿Puedo hacer eso con CSS puro? Por ejemplo: Gracias + Ejemplo Gracias Jonathan, utilicé el […]

Cómo agregar borde en mi clip-path: polygon (); Estilo CSS

Deseo saber si es posible agregar border en mi clip-path:polygon(); estilo o de alguna otra manera de agregar borde? como: border:5px solid red; CSS .poligon { display: inline-block; position:relative; width:150px; height:150px; background: black; box-sizing:border-box; padding:55px; } .poligon img { display: inline-block; border:5px solid red; width:150px; height:150px; -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, […]

¿Es posible crear una esquina en ángulo en CSS?

Me pregunto si hay alguna forma de crear esta forma con CSS puro. Para ampliar aún más este problema, esta forma necesita recortar la imagen en el interior (piénselo como una máscara, pero el borde gris debe estar visible). ¿O es mejor crear esto en canvas / svg?

Alinear texto en línea inclinada

¿Es posible hacer texto alineado a la izquierda en una línea inclinada ? su alineación debe seguir la imagen inclinada inclinada con soporte requerido para IE9 +? Mi código de ejemplo: img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet […]

Rincón inclinado en caja de CSS

He estado jugando con CSS por poco tiempo y estoy tratando de tener una caja normal, pero con la esquina superior izquierda cortada en un ángulo de 45 grados. No es una pequeña cantidad tampoco; Estoy viendo un corte de esquina bastante grande en ese ángulo. Este efecto: ¿Cómo debo hacerlo?

¿Cómo puedo crear una “cola de información sobre herramientas” usando CSS puro?

Me encontré con un buen truco de CSS. Mira el violín … .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } Cool Trick: How do I get this effect with only CSS? Esto crea un […]

¿Es posible un radio de borde cóncavo?

Aquí hay un ejemplo simple y convexo. http://jsfiddle.net/swY5k/ #test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } Sin embargo, quiero un radio de frontera cóncavo. Intenté hacer que el radio del borde fuera negativo, pero esto no funcionó. Ejemplo de cóncavo / convexo: