Home >Web Front-end >CSS Tutorial >How to draw an ellipse with upper and lower sharp corners in css
How to draw an ellipse with upper and lower sharp corners in css
- WBOYOriginal
- 2021-12-03 13:51:081992browse
Method: 1. Use the width and height attributes to set the element to a rectangle with a height value greater than the width value; 2. Use the "border-radius" attribute to set the rectangular element to an ellipse with upper and lower corners, only You need to add the "border-radius:100%;" style to the rectangular element.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to draw an ellipse with upper and lower sharp corners in css
In css, you can use the width and height attributes to draw a rectangle first, where the width sets the rectangle The width and height properties set the height of the rectangle. Sets the height of the rectangle to be greater than the width of the rectangle. Then use the border-radius:100% statement to set the width, short, and height rectangle into an ellipse, which is an ellipse with upper and lower corners.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 200px;
border:1px solid #000000;
border-radius:100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to draw an ellipse with upper and lower sharp corners in css. For more information, please follow other related articles on the PHP Chinese website!