Draw image using css

Question

Draw image using css

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

I would like to know if you would like to draw the image below using only css?

Iwouldliketocreateabuttonlikethis

html html5 css css3

asked by anonymous 28.07.2015 / 14:18

2 answers

How to make the data appear in the fields in AngularJS Show an object / variable with different names in R?

score 4 · Answer 1

Using the pseudo-elements :after and :before :

In your need you may need to adapt the code by changing the values of top , left and rigth until you reach the desired effect

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>

score 2 · Answer 2

It is possible, using HTML and CSS, here is a generator for you to get an idea of how to do it: link

You'll always have to have at least one HTML tag, because CSS is style sheet, so the drawing is done over the HTML.