HTML+CSS implementation code for rounded rectangle

HTML+CSS implementation code for rounded rectangle
I was bored and suddenly thought of the implementation of rounded rectangle. But we have talked about this topic for too long. Various implementation schemes can be found on the Internet. Here I just record the one I think is better. This solution does not use any pictures and is implemented in pure HTML+CSS.
CSS code ====================================

Copy code
The code is as follows:

<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
font-size:.01em;
overflow:hidden;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000;}
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000}
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000}
.spiffyfg{
background:#b20000}
</style>

html code ======================================

Copy code
The code is as follows:

<div style="background:#680000; padding:20px">
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b>
</b>
<div style="background:#b20000; height:100px; font-size:30pt; text-align:center;">
&bull;&bull;&bull;
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b>
</b>
</div>

If you are interested, try the above two codes.
Although this solution is pretty good, I still came up with a similar but more concise implementation, which will be introduced in the following article.

<<:  Detailed example of using typescript to encapsulate axios in Vue3

>>:  Examples of common Nginx misconfigurations

Recommend

How to install mongodb 4.2 using yum on centos8

1. Make a repo file Refer to the official install...

Website redesign is a difficult task for every family

<br />Every family has its own problems, and...

Some tips on website design

In fact, we have been hearing a lot about web des...

How to install Nginx in CentOS

Official documentation: https://nginx.org/en/linu...

The use of textarea in html and common problems and case analysis

The textarea tag is an HTML tag that we often use....

Detailed example of using case statement in MySQL stored procedure

This article uses an example to illustrate the us...

Use xshell to connect to the Linux server

Benefits of using xshell to connect to Linux We c...

Right align multiple elements in the same row under div in css

Method 1: float:right In addition, floating will ...

The perfect solution to the error of installing Mysql Applying Security in windows server2014

The reason is that it was not uninstalled cleanly...

Vue3 list interface data display details

Table of contents 1. List interface display examp...

MYSQL database GTID realizes master-slave replication (super convenient)

1. Add Maria source vi /etc/yum.repos.d/MariaDB.r...

Ubuntu 16.04 mysql5.7.17 open remote port 3306

Enable remote access to MySQL By default, MySQL u...

Summary of methods for writing judgment statements in MySQL

How to write judgment statements in mysql: Method...

How to use a field in one table to update a field in another table in MySQL

1. Modify 1 column update student s, city c set s...

Detailed explanation of the Docker container lifecycle architecture and the differences between it and VM

Container lifecycle The life cycle of a container...