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

Detailed tutorial on VMware installation of Linux CentOS 7.7 system

How to install Linux CentOS 7.7 system in Vmware,...

Detailed explanation of the new background properties in CSS3

Previously, we knew several attributes of backgro...

JavaScript method to detect the type of file

Table of contents 1. How to view the binary data ...

Summary of MySQL common SQL statements including complex SQL queries

1. Complex SQL queries 1.1. Single table query (1...

How to decompress multiple files using the unzip command in Linux

Solution to the problem that there is no unzip co...

Tutorial on installing MySQL 5.7.18 using RPM package

system: CentOS 7 RPM packages: mysql-community-cl...

After Apache is installed, the service cannot be started (error code 1 appears when starting the service)

Table of contents 1. Error message 2. Cause of er...

How MySQL handles implicit default values

Some students said that they encountered the prob...

Complete steps of centos cloning linux virtual machine sharing

Preface When a Linux is fully set up, you can use...

Combining XML and CSS styles

student.xml <?xml version="1.0" enco...

In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle

Table of contents Same Origin Policy Ajax request...

Various problems encountered by novices when installing mysql into docker

Preface Recently, my computer often takes a long ...

Detailed explanation of Angular structural directive modules and styles

Table of contents 1. Structural instructions Modu...

Import csv file into mysql using navicat

This article shares the specific code for importi...

JavaScript Prototype Details

Table of contents 1. Overview 1.1 What is a proto...