JSFiddle - React, Tailwind, and code Playground

by xiazdong

HTML

<div id="b1">b1</div>
<div id="b2">b2</div>
<div id="b3">b3</div>
<div id="b4">b4</div>
<div id="b5">b5</div>
<div id="b6">b6</div>
<div id="b7">b7</div>
<div id="b8"><span>b8</span></div>

CSS

div{
    color:white;
    line-height:200px;
    font-size:20px;
    text-align:center;
    display:inline-block;
    background-color:#333;
    width:200px;
    height:200px;
    margin-left:30px;
    margin-bottom:30px;
}
#b1{
    border-radius:50px 40px 30px 20px;
}
#b2{
    border-top-left-radius: 10px 50px;
    border-top-right-radius:60px 20px;
    border-bottom-right-radius:30px 70px;
    border-bottom-left-radius:80px 40px;
    /*
       等价于： border-radius:10px 60px 30px 80px / 50px 20px 70px 40px;
    */
}
#b3{
    border-radius:50%;
}
#b4{
    background-color:#F5F240;
    border-radius: 10px 150px 30px 150px;
}
#b5{
    border:20px solid red;
    border-radius:10px;
    outline:10px solid green;
}
#b6{
    margin-left:20px;
    box-shadow:3px 3px 5px 5px #333;
}
#b7{
    box-shadow:0px 0px 0px 5px red,
                        0px 0px 0px 10px green,
                        0px 0px 0px 20px blue;
    position:relative;
    top:-100px;
}
#b8{
    width:0px;
    height:0px;
    border-width:100px;
    border-style:solid;
    border-top-color:#333;
    border-bottom-color:#333;
    border-left-color:yellow;
    border-right-color:yellow;
    border-radius:50%;
}
#b8 > span{
    position:relative;
    top:-80px;
    right:8px;
}