CODEWITHSUNDEEP
cssshapes
Carmen Delgado
Carmen Delgado

Reputation: 1

Generate this shape with css

SHAPE

enter image description here

I need to generate this shape (the one within the black square) only with css and html. I've tried with border-radius but Im not able to generate it with that curvature. Researching a little bit I've found that it's possible to draw a shape like that using svgs and paths but Im not sure if that's the way to go, if so, is there any easy tool to create such svg? Thank you in advance.

Here's the codesandbox where i've been trying to generate the shape using border-radius: https://codesandbox.io/s/practical-hermann-n5zxm2?file=/package.json

Upvotes: 0

Views: 75

Answers (1)

Eric Olsen
Eric Olsen

Reputation: 208

This can be accomplished via SVG quite easily if you'd like. You can use some cool webapps online to help you design the path or you can create one yourself by hand

Below I have created a basic HMTL page that displays an SVG file. I have also created the SVG file that gives the rough shape your looking for

index.html

<!doctype html
<html>
    <head>
        <title>svg</title>
        <link rel ="stylesheet" href="styles.css">
    </head>

    <div id="root">
        <p>Text</p>
        <img src="image.svg" alt="AnSvgHere">
    </div>
    <script src="scripts.js"></script>
</html>

image.svg

<svg width="256" height="256" viewbox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <path fill="none"
    stroke="red"
    d="M 20 10
    L 50 10
    C 75 15, 75 25, 100 30
    L 120 30
    C 130 35 130 35 130 40
    L 130 90
    C 130 100 130 100 120 100
    L 20 100
    C 10 100 10 100 10 90
    L 10 20
    C 10 10 10 10 20 10" />
</svg>

These create the following image:

SVG image

SVG is a versatile tool that can be used for drawing complex shapes and paths. you can find more information about SVGs and more specifically the d attribute in the path element here

Link to Docs on Path element

Upvotes: 0

Related Questions