Comment obtenir des coins arrondis inversés avec CSS ? (code)

Le contenu de cet article explique comment obtenir des coins arrondis inversés en CSS ? (code), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Principe

Élément parent relative, élément enfant absolute, puis définissez l'apparence spécifique via top, left, right, bottom Emplacement.

Structure DOM

<div>
    <div></div>
</div>

Style CSS

.wrapper-dashed{
    position: relative;
    height: 1px;
    width: 100%;
}
/*虚线实现*/
.dashed {
    border-top: 1px dashed #cccccc;
    height: 1px;
    overflow: hidden;
}
.dashed:before, .dashed:after{
    display: block;
    position: absolute;
    content: "";
    width:10px;
    height:10px;
    background-color:#f3f5f9;
    border-radius:50%;
    top: -5px;
}
.dashed:before{
    left: -5px;
}
.dashed:after{
    right: -5px;
}

Rendu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!