Draw image using css

Asked

Viewed 1,067 times

3

I wonder if you could draw the image below using css only? inserir a descrição da imagem aqui

I’d like to create a button like this inserir a descrição da imagem aqui

html css html5 css3

  • You can use :after and :before to "create" elements linked to the parent element

  • 2

    It’s possible... I just don’t think anyone will be willing to do it for you.

  • "draws" is different from "draw".. anyway, see this link: http://jsfiddle.net/stackmanoz/VbgKW/

  • Related: How to make this arrow in CSS

2 answers

4

Using the pseudo-elements :after and :before:

In their need it may be necessary to adapt the code by changing the values of top, left and rigth until you reach the effect you want

div{
  width: 0;
  height: 0;
  top:40px;
  left:50px;
  position: relative;
  border-style: solid;
  border-width: 100px 130px 0 130px;
  border-color: #000000 transparent transparent transparent;
}

div:before {
  content: "";
  display: block;
  position: relative;;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 200px;
  height: 50px;
  background-color: white;
  right: 220px;
  top: -80px;
}

div:after {
  content: "";
  display: block;
  position: relative;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 200px;
  height: 50px;
  background-color: white;
  left: 20px;
  top: -130px;
}

button{
  width: 400px;
  height: 80px;
  display: block;
  position: absolute;
left: 0px;
  background: rgb(0, 0, 0);

  border-radius: 70px;
}
<button></button>
<br/>
<div></div>

  • Would it be possible to put this drawing under a black button to give the impression that this arrow belongs to the button? I’m trying but I still can’t.

  • What do you mean? Remembering that you are not "drawing" but styling elements of HTML, post an example of your button code and better explain your need

  • I updated my question with the image of how I would like the button

3

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.