How to create cone shape using clip path css?

Jorakuly Atamuradow 0
Viewed 53

Now I try create sector shape or cone shape on css and html for write inside text. This picture. If someone have any idea please write. I try use clip-path and shape-outside for this. but I cannot do it, I want to this like this picture

css-shapes css html
1 Answers

Try this:

.pie {
  width: 300px;
  background: #f06;
  border-radius: 50%;
}

.pie circle {
  fill: none;
  stroke: gold;
  stroke-width: 32;
  animation: rotate 1.5s ease-in;
}

#cone {
  margin-top: -80px;
  margin-left: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>  
 <svg viewBox="0 0 64 64" class="pie">
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 75 100">
  </circle>
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 15 100; stroke: green; stroke-dashoffset: -115">
  </circle>
  <circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: 25 100; stroke: blue; stroke-dashoffset: -138">
  </circle>
 </svg>

 <p id = "cone">Hello World</p>

</body>
</html>

Rizeen0
Related