tag:blogger.com,1999:blog-9091625040332238136.post2001993515390440142..comments2024-03-27T01:20:06.642-03:00Comments on MiniTutoriales: Cómo dibujar figuras geométricas complejas con CSS [actualizado]Unknownnoreply@blogger.comBlogger21125tag:blogger.com,1999:blog-9091625040332238136.post-7440705399571442232021-05-04T12:24:35.277-03:002021-05-04T12:24:35.277-03:00buenas, como puedo hacer que cambie de diferentes ...buenas, como puedo hacer que cambie de diferentes colores?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-81614928518868935942020-06-28T16:56:45.662-03:002020-06-28T16:56:45.662-03:00buenas, me gustaria usar las figuras de corazon, t...buenas, me gustaria usar las figuras de corazon, triangulo y estrella pero en lugar del color rojo me gustaria que tuviera una imagen pero uso el background pero no me sale donde deberia, que podria hacer? Andrea Pinzonhttps://www.blogger.com/profile/03165563731450221951noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-11470468774219623892019-10-02T22:30:49.580-03:002019-10-02T22:30:49.580-03:00hi esta bien de ahuevo hi esta bien de ahuevo MyAstron Jshttps://www.blogger.com/profile/15346697360795639613noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-57360917467996102062017-10-02T05:06:22.068-03:002017-10-02T05:06:22.068-03:00Hola me gustaría saber como podría jugar con los t...Hola me gustaría saber como podría jugar con los tamaños de las figuras triangulo y rombo utilizando un inputAnonymoushttps://www.blogger.com/profile/08758997821194271806noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-78549381737663900942017-04-01T21:00:24.295-03:002017-04-01T21:00:24.295-03:00muy buenomuy buenoAnonymoushttps://www.blogger.com/profile/07158948490816568346noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-90933014076212724242017-01-12T14:30:52.899-03:002017-01-12T14:30:52.899-03:00Te conviene utilizar una imagen como background. D...Te conviene utilizar una imagen como background. De otro modo, tendrías que experimentar con algo así:<br /><br /><div id="menu-item"><br /><div id="triangle"><br /></div><br /></div><br /><br />#menu-item {position: relative;}<br />#triangle {position: absolute; bottom: 10px; display: none;}<br />#menu-item:hover #triangle {display: block;}ayreonautahttps://www.blogger.com/profile/09947018592384039294noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-23943037162095614912017-01-12T13:28:42.209-03:002017-01-12T13:28:42.209-03:00Buenas, yo quiero hacer un efecto hover en un menú...Buenas, yo quiero hacer un efecto hover en un menú, cuando pase el ratón por las opciones del menú, que salga la figura debajo de cada opción, en este caso la figura seria un triángulo, como podría hacerlo?Orlando Quintanahttps://www.blogger.com/profile/10891565825983252641noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-88715686940986245702016-12-08T14:12:41.497-03:002016-12-08T14:12:41.497-03:00No (a menos que uses divs como bordes). Para algo ...No (a menos que uses divs como bordes). Para algo así de complejo deberías usar SVG o simplemente una imagen.ayreonautahttps://www.blogger.com/profile/09947018592384039294noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-12727546891165493622016-12-06T21:54:32.508-03:002016-12-06T21:54:32.508-03:00pueden ser div irregulares transparentes con conto...pueden ser div irregulares transparentes con contorno de color?fbarettohttps://www.blogger.com/profile/02145776767865654032noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-24615498775780065952016-08-23T13:44:56.517-03:002016-08-23T13:44:56.517-03:00Muy buenas, muchas gracias por el aporte, e estado...Muy buenas, muchas gracias por el aporte, e estado tratando de darle la forma de hueso al div pero no lo e conseguido espero me puedas ayudar saludos y gracias de antemanoAnonymoushttps://www.blogger.com/profile/08054358000842213465noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-85445580141176239732016-02-24T09:39:54.989-03:002016-02-24T09:39:54.989-03:00gracias.gracias.Anonymoushttps://www.blogger.com/profile/14282882460505298726noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-70584662381177585292016-02-23T16:57:57.979-03:002016-02-23T16:57:57.979-03:00Deberías añadir otra caja inmediatamente después y...Deberías añadir otra caja inmediatamente después y posicionarla sobre la figura:<br /><br /><div id="interior">Texto</div><style> #interior {position: relative; top: -100px; left: 0; text-align: left; width: 150px;<br />height: 100px; margin: 0 -100px -150px 0;} </style>ayreonautahttps://www.blogger.com/profile/09947018592384039294noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-69341106212291615442016-02-23T13:54:22.046-03:002016-02-23T13:54:22.046-03:00como hago para que el texto no se deforme.hice un ...como hago para que el texto no se deforme.hice un paralelogramo y quiero hacer dos columnas o texto pero que esten derechos.el texto tomo la forma de la caja.gracias<br />Anonymoushttps://www.blogger.com/profile/14282882460505298726noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-26598104575284180802016-02-11T01:11:36.182-03:002016-02-11T01:11:36.182-03:00No creo que sea posible lograrlo con puro CSS. Pue...No creo que sea posible lograrlo con puro <b>CSS</b>. Puede intentarse algo así:<br /><br /><style><br />.seno { <br /> text-align: center;<br />}<br />.seno_span {<br /> display: inline-block;<br /> margin:0;<br /> padding:0;<br /> height: 20px;<br /> width: 40px;<br /> border: 1px solid black;<br />}<br />.seno_span_1 {<br /> border-bottom: none;<br /> border-radius: 20px 20px 0 0;<br /> transform: translate(-20px, 0) scale(2,1);<br />}<br />.seno_span_2 {<br /> border-top: none;<br /> border-radius: 0 0 20px 20px;<br /> transform: translate(20px, 20px) scale(2,1);<br />}<br />.seno_span_1_2 {<br /> transform: translate(0, 20px) scale(1,2);<br />}<br />.seno_span_2_2 {<br /> transform: translate(0, 60px) scale(1,2);<br />}<br /></style><br /><br /><div class="seno"><br /> <span class="seno_span seno_span_1 seno_span_1_2"></span><span class="seno_span seno_span_2 seno_span_2_2"></span><br /></div><br /><br />Pero el resultado está lejos de ser una sinusoide real.<br /><br /><br />Para un efecto más preciso, es necesario usar <b>Canvas y JavaScript</b>. Por ejemplo:<br /><br /><canvas id="canvas" width="500" height="50"></canvas><br /><br /><script><br />var canvas = document.getElementById("canvas");<br />var ctx = canvas.getContext("2d");<br />ctx.beginPath();<br />ctx.lineWidth = 1;<br />ctx.strokeStyle = "rgb(0,0,0)";<br />for (var i = 0; i <= 500; i++) {<br /> var x = i * 5;<br /> var y = Math.sin(5 * x + 1);<br /> ctx.lineTo(0.5 + x, 25 - y * 24);<br />}<br />ctx.stroke();<br /></script><br /><br /><br />O bien recurrir a <b>SVG</b>, que es lo más lógico, pero complejo.<br /><br />Personalmente, usaría una imagen.<br />ayreonautahttps://www.blogger.com/profile/09947018592384039294noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-15688511617481984102016-02-10T19:28:47.017-03:002016-02-10T19:28:47.017-03:00amigo me ayudarias a dibujar las figuras geometric...amigo me ayudarias a dibujar las figuras geometricas seno, cosena y tangente en html5?Anonymoushttps://www.blogger.com/profile/17897129334305061296noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-2604061381578113332014-08-28T02:46:53.512-03:002014-08-28T02:46:53.512-03:00Depende de la figura. En un círculo, por ejemplo, ...Depende de la figura. En un círculo, por ejemplo, basta con poner como fondo del div la imagen deseada:<br /><br />#circle {background:url("/imagen.png");}<br /><br />En otros casos esto no es posible porque los divs utilizan la propiedad border para formar las figuras. Conviene utilizar directamente una imagen con la forma requerida. ayreonautahttps://www.blogger.com/profile/09947018592384039294noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-71997051213225796412014-08-27T21:15:46.877-03:002014-08-27T21:15:46.877-03:00Como podría hacer para que el div tenga la forma d...Como podría hacer para que el div tenga la forma de cualquier figura y adentro tenga una imagen.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-22250445821399941712014-04-22T20:26:19.705-03:002014-04-22T20:26:19.705-03:00Si lo que necesitas es cambiar el estilo de la fig...Si lo que necesitas es cambiar el estilo de la figura cuando el cursor se posa sobre ella, simplemente basta con agregar ":hover" al ID del elemento:<br />#circle<b>:hover</b> {color:#00ff00;}<br />Y cambiar el contenido de los corchetes por el estilo nuevo.<br /><br />Si tu idea es colocar un contenido sobre la figura, sólo debes añadirlo dentro del DIV correspondiente. Por ejemplo:<br /><div id="talkbubble"><b>Contenido</b></div>ayreonautahttps://www.blogger.com/profile/09947018592384039294noreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-50973170678940096132014-04-22T18:52:02.432-03:002014-04-22T18:52:02.432-03:00Hola y para poder ponerle un hover en el css como ...Hola y para poder ponerle un hover en el css como seria?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-36329184672178628222014-01-21T17:18:40.215-03:002014-01-21T17:18:40.215-03:00Me sirvio mucho, gracias.Me sirvio mucho, gracias.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-9091625040332238136.post-33396526556846854782012-12-08T23:34:06.535-03:002012-12-08T23:34:06.535-03:00Muito obrigado por este excelente tutorial!Muito obrigado por este excelente tutorial!Raulhttps://www.blogger.com/profile/06859002488130827235noreply@blogger.com