Preguntas etiquetadas con css-shapes

На этот вопрос есть ответы en Stack Overflow на русском : Как создать треугольники CSS? Hay muchas formas CSS diferentes en CSS Tricks - Formas de CSS y estoy particularmente perplejo con un triángulo: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px …

1847 css  geometry  polygon  css-shapes 

¿Cómo creo un menú que se vea así ... Enlace a PSD No quiero usar las imágenes PSD. Preferiría usar iconos 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 …

321 css  tooltip  css-shapes 

Me gustaría rodear un número en un círculo como en esta imagen: ¿Es esto posible y cómo se logra?

250 html  css  css-shapes 

Quiero tener una página web que tenga una palabra centrada. Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos, es decir, comienza en un punto y dibuja líneas y curvas con el tiempo de modo …

229 javascript  css  canvas  html5-canvas  css-shapes 

¿Cómo creo una forma como esta para mostrar en una página web? No quiero usar imágenes, ya que se volverían borrosas al escalar Intenté con CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> …

223 html  css  svg  css-shapes 

Este es el CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } ¿Cómo produce el círculo de abajo? Supongamos que si el ancho de un rectángulo es de 180 píxeles y la altura es de 180 píxeles, entonces se vería así: Después de aplicar un …

206 html  css  css-shapes 

Me pregunto si hay una manera más fácil de crear divisiones circulares que lo que estoy haciendo ahora. Actualmente, solo estoy haciendo una imagen para cada tamaño diferente, pero es molesto hacerlo. ¿Hay alguna forma de usar CSS para hacer divs que son circulares y puedo especificar el radio?

183 html  css  geometry  css-shapes 

Encontré este ejemplo en stackoverflow: Dibujar círculo usando CSS solo Lo cual es genial. ¿Pero me gustaría saber cómo modificar ese ejemplo para poder incluir texto en el medio del círculo? También encontré esto: centrado vertical y horizontalmente el texto en círculo en CSS (como la insignia de notificación de …

156 css  css-shapes 

¿Es posible controlar la longitud y la distancia entre los trazos de borde punteado en CSS? Este ejemplo a continuación se muestra de manera diferente entre los navegadores: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> Ejecutar fragmento de códigoHide resultsExpandir fragmento …

124 css  border  css-shapes 

Si utilizo un valor de píxel o em para el radio del borde, el radio del borde es siempre un arco circular o una forma de píldora, incluso si el valor es mayor que el lado más grande del elemento. Cuando uso porcentajes , el radio del borde es elíptico …

124 css  css-shapes 

¿Cómo se dibuja un círculo usando HTML5 y CSS3? ¿También es posible poner texto dentro?

116 html  css  geometry  css-shapes 

Intento usar un color hexadecimal personalizado para mi triángulo CSS (borde). Sin embargo, dado que usa propiedades de borde, no estoy seguro de cómo hacerlo. Me gustaría mantenerme alejado de javascript y css3 simplemente por compatibilidad. Estoy tratando de que el triángulo tenga un fondo blanco con un borde de …

114 css  border  css-shapes 

Cerrado. Esta pregunta no cumple con las pautas de Stack Overflow . Actualmente no acepta respuestas. ¿Quieres mejorar esta pregunta? Actualice la pregunta para que esté relacionada con el tema de Stack Overflow. Cerrado hace 5 años . Mejora esta pregunta He buscado en este sitio web para encontrar barras …

112 html  css  progress-bar  progress  css-shapes 

Ok, entonces todos saben que puedes hacer un triángulo usando esto: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } Y eso produce un triángulo relleno sólido. Pero, ¿cómo harías un triángulo con forma de flecha de tipo hueco, como …

102 html  css  css-shapes 

Estoy tratando de crear una forma como en la imagen de abajo con un borde inclinado en un solo lado (por ejemplo, el lado inferior) mientras que los otros bordes permanecen rectos. Intenté usar el método de borde (el código se proporciona a continuación) pero las dimensiones de mi forma …

93 html  css  responsive-design  css-shapes