-7

How do I get the side of div to curve on hover? The div is like this before I move the point over it:

enter image description here

And when I move the point over the div,it like this:

enter image description here

How should I write the HTML and CSS code?

Thomas
  • 6,291
  • 6
  • 40
  • 69
Json sun
  • 9
  • 2
    Show us what you have tried so far and we will be able to help. – Aslam Oct 26 '17 at 09:35
  • Possible duplicate of [Rounded side, not rounded corners](https://stackoverflow.com/questions/14508148/rounded-side-not-rounded-corners) – Thomas Nov 30 '17 at 15:45

1 Answers1

0

I actually like this question; but, I am assuming you are talking about the white area. This is a great place for a number of very basic CSS style rules, starting with simple (border-radius and hover).

For the following approaches, assume the below HTML structure:

 <div id="container">
     <div> content </div>
 </div>

If you are looking for a basic, un-animated transition from straight to curved, you might consider the following CSS approach (your may need to apply a particular web-kit to ensure cross-browser uniformity):

#container:hover {
   border-top-left-radius: 100% 50px;
   border-top-right-radius: 100% 50px;    
}

Above is what is known as "slash syntax"; however, it is sort of shorthand: no slash is present (consult MDN footnotes). The second value is the "vertical radius". In the above case, for a symmetrical look, both value pairs must match for both -right and -left.

Thomas
  • 6,291
  • 6
  • 40
  • 69