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 use ES6 class inheritance to achieve a gorgeous ball effect

Table of contents introduce Implementation steps ...

MySQL performance optimization index pushdown

Index condition pushdown (ICP) is introduced in M...

Multi-service image packaging operation of Dockerfile under supervisor

Writing a Dockerfile Configure yum source cd /tmp...

Solutions to Files/Folders That Cannot Be Deleted in Linux

Preface Recently our server was attacked by hacke...

Usage of Vue filters and timestamp conversion issues

Table of contents 1. Quickly recognize the concep...

How to deploy Oracle using Docker on Mac

How to deploy Oracle using Docker on Mac First in...

MySql inserts data successfully but reports [Err] 1055 error solution

1. Question: I have been doing insert operations ...

Detailed explanation of TypeScript's basic types

Table of contents Boolean Type Number Types Strin...

Solution for converting to inline styles in CSS (css-inline)

Talk about the scene Send Email Embedding HTML in...

Detailed tutorial on installing mysql8.0.22 on Alibaba Cloud centos7

1. Download the MySQL installation package First ...

MySQL initialization password operation under Mac

A simple record of the database startup problems ...

Win10 configuration tomcat environment variables tutorial diagram

Before configuration, we need to do the following...

MySQL 8.0.18 installation and configuration method graphic tutorial (linux)

This article records the installation and configu...

MySQL uses events to complete scheduled tasks

Events can specify the execution of SQL code once...

Example of JSON output in HTML format (test interface)

To display the JSON data in a beautiful indented ...