0

Necesito dibujar esta figura con css

introducir la descripción de la imagen aquí

Como podría hacerlo??

Tengo esto pero no logro hacerlo.

Código css:

.seccion
{
    width: 350px;
    height: 200px;
    border-left: 70px solid #fff;
    border-right: 70px solid #fff;
    border-top: 100px solid #ccc;
    border-radius: 50% 50% 0 0;
}

Código html:

<div class="seccion">
</div>

Yo necesito formar esto, solo el contorno de cada figura.

introducir la descripción de la imagen aquí

6
  • 2
    ¿Qué has intentado hasta ahora? Edita tu pregunta agregando tu progreso
    – Rene Limon
    Commented el 7 dic. 2018 a las 20:09
  • Hola @Jorge Alonso, ten en cuenta como puedes preguntar para que podamos ayudarte, ademas de adjuntar codigo lo que tienes, tus he intentos, no pretendas que hagamos todo tu trabajo.
    – cosito
    Commented el 7 dic. 2018 a las 20:10
  • No tengo nada de codigo por que no se me ocurre nada :( Commented el 7 dic. 2018 a las 20:12
  • 2
    Yo lo haría con SVG. Por cierto: aquellas cositas pequeñas son números?
    – enxaneta
    Commented el 7 dic. 2018 a las 20:20
  • Si pero solo importa la figura Commented el 7 dic. 2018 a las 20:21

3 respuestas 3

2

Si necesitas solo el svg lo puedes copiar del inspector. Espero que esto sea lo que necesites.

var SVG_NS = 'http://www.w3.org/2000/svg';
var SVG_XLINK = "http://www.w3.org/1999/xlink"
var svg = document.querySelector("svg");
let c={x:700,y:700}
let a1 = -Math.PI/2 -Math.PI/4; 
let a2 = -Math.PI/2 - Math.PI/10;

for(let r = 300; r < 700; r+=10){
  let x1 = c.x + r*Math.cos(a1);
  let y1 = c.y + r*Math.sin(a1);
  let x2 = c.x + r*Math.cos(a2);
  let y2 = c.y + r*Math.sin(a2);
  let o = {
    d:`M${x1},${y1}A${r},${r} 0 0 1 ${x2},${y2}`
  }
  drawPath(o, svg)
}


function drawPath(o, parent) {
  var path = document.createElementNS(SVG_NS, 'path');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      path.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(path);
  return path;
}
svg{border:1px solid;height:90vh;}
path{fill:none; stroke:black;}
<svg viewBox="100 0 600 600"></svg>

Actualización:

El OP comenta: "Hubiera estado perfecto si dibujara el contorno y no las lineas". A continuación viene el código para dibujar solo el contorno.

var SVG_NS = "http://www.w3.org/2000/svg";
var SVG_XLINK = "http://www.w3.org/1999/xlink";
var svg = document.querySelector("svg");
let c = { x: 700, y: 700 };
let a1 = -Math.PI / 2 - Math.PI / 4;
let a2 = -Math.PI / 2 - Math.PI / 10;

// dibujar contorno

let x1 = c.x + 300 * Math.cos(a1);
let y1 = c.y + 300 * Math.sin(a1);
let x2 = c.x + 300 * Math.cos(a2);
let y2 = c.y + 300 * Math.sin(a2);

let x3 = c.x + 690 * Math.cos(a2);
let y3 = c.y + 690 * Math.sin(a2);
let x4 = c.x + 690 * Math.cos(a1);
let y4 = c.y + 690 * Math.sin(a1);

let o = {
  style: "fill:hsla(110, 70% ,40%,.35)",
  d: `M${x1},${y1}A${300},${300} 0 0 1 ${x2},${y2}L${x3},${y3}A${690},${690} 0 0 0 ${x4},${y4}L${x1},${y1}z`
};
drawPath(o, svg);

function drawPath(o, parent) {
  var path = document.createElementNS(SVG_NS, "path");
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      path.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(path);
  return path;
}
svg{border:1px solid;width:90vh;}
path{fill:none; stroke:black;}
<svg viewBox="100 0 600 600"></svg>

4
  • Hubiera estado perfecto si dibujara el contorno y no las lineas. Commented el 7 dic. 2018 a las 21:51
  • Te agradezco mucho que me estés ayudando pero la verdad no entiendo como funciona tu código, svg nunca lo habia escuchado ni visto y la verdad no tengo idea de como trabaja, aparte de esta figura necesito dibujar más figuras y le intente mover a tu codigo pero no tuve éxito :( Commented el 10 dic. 2018 a las 15:59
  • El escenario que pongo es lo que necesito formar pero solamente había puesto la primer figura para ver si podía basarme de ella para hacer las demas pero veo que no estoy teniendo éxito. Commented el 10 dic. 2018 a las 16:03
  • @JorgeAlonso gracias por comentar. He añadido otra respuesta donde utilizo solo CSS. Por lastima estoy utilizando clip-path que no funciona en Edge y IE. Si en un futuro decides estudiar SVG esta es una buena introducción en castellano: SVG - una introducción
    – enxaneta
    Commented el 10 dic. 2018 a las 17:13
1

Esto se acerca a lo que buscas, podrías ir variando este código hasta que se adapte mejor a tus necesidades:

#figura {
       		border-bottom: 200px solid #9dce98;
      		border-left: 25px solid transparent;
      		border-right: 25px solid transparent;
      		height: 0;
      		width: 100px;
      		transform: rotate(140deg);
      		margin-top: 100px;
      		margin-left: 50px;
    	}
<div id="figura"></div>

0

Esta es otra respuesta porque el OP dice no saber trabajar con SVG así que a continuación viene un intento de hacerlo con CSS:

Explicación:

  1. En el HTML tengo un div que a la parte superior tiene los bordes redondeados.
  2. Este div tiene overflow:hidden.
  3. También tiene un pseudo elemento before con la parte superior redondeada. Este elemento es transparente pero tiene una sombra que llena el div.

  4. A continuación utilizo clip-path para cortarlo todo en forma trapezoidal, y finalmente

  5. Lo giro con transform:rotate.

div{
  width:150px;
  height:200px;
  overflow:hidden;
  position:absolute;
  margin:auto;
  left:0;right:0;top:0;bottom:0;
  border-top-left-radius:  50%  5% ;
  border-top-right-radius: 50%  5%;
  clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100% );
  transform:rotate(-15deg);
}

div:before{
  content:"";
  display:block;
  width:100%;
  height:20px;
  border-top-left-radius:     50% ;
  border-top-right-radius:    50%;
  position:absolute;
  bottom:-10px;
  box-shadow: 0 0 0 300px hsla(120,70%,40%,.5);
}
<div></div>

A diferencia de SVG esto funciona en Chrome y Firefox pero no en Edge, IE ya que estoy utilizando clip-path. En Safari funciona con prefijo.

2
  • Y si quisiera hacerlo mas ancho, así como esta la figura rosa (B)?? Le movi al width y los valores de polygon y no logré tener éxito?? Commented el 10 dic. 2018 a las 18:00
  • Para hacer algo tan complejo te recomiendo SVG porque necesitas calcular coordenadas.
    – enxaneta
    Commented el 10 dic. 2018 a las 18:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.