<div class="total-container">
<div class="receipt -receipt-circle-simple">
<p>For cases where something went wrong when trying to import a module into a custom or legacy environment, you can try importing the module package directly</p>
<p>For convenience, aliases have been provided for all common request methods.</p>
<p>The available instance methods are listed below. The specified config will be merged with the instance config.</p>
</div>
<br>
<br>
<br>
<div class="receipt -receipt-circle-normal">
<p>For cases where something went wrong when trying to import a module into a custom or legacy environment, you can try importing the module package directly</p>
<p>For convenience, aliases have been provided for all common request methods.</p>
<p>The available instance methods are listed below. The specified config will be merged with the instance config.</p>
</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
body {
background: linear-gradient(cyan, palegoldenrod);
}
.total-container {
width: 360px;
margin: 20px;
}
.receipt {
color: #fff;
font-size: 14px;
padding: 20px;
> p {
margin: 0;
}
> p:not(:last-child) {
margin: 0 0 1em 0;
}
}
.-receipt-circle-simple {
position: relative;
background-color: #7089cd;
&::before, &::after {
position: absolute;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
content: "";
top: 50%;
}
&::before {
left: 0;
transform: translate(-50%, -50%);
}
&::after {
right: 0;
transform: translate(50%, -50%);
}
}
.-receipt-circle-normal {
background-image:
radial-gradient(circle 15px at right center, transparent 100%,#7089cd),
radial-gradient(circle 15px at left center, transparent 100%,#7089cd);
background-size: 50% 100%;
background-position: right center, left center;
background-repeat: no-repeat;
}
.-receipt-circle-4 {
background-image: radial-gradient(circle 15px at left top, transparent 100%,#7089cd),
radial-gradient(circle 15px at right top, transparent 100%,#7089cd),
radial-gradient(circle 15px at right bottom, transparent 100%,#7089cd),
radial-gradient(circle 15px at left bottom, transparent 100%,#7089cd);
background-size: 60% 60%;
background-position: left top, right top, right bottom, left bottom;
background-repeat: no-repeat;
}
.-receipt-bevel-4 {
background-image: linear-gradient(135deg, transparent 15px,#7089cd 0),
linear-gradient(225deg, transparent 15px,#7089cd 0),
linear-gradient(-45deg, transparent 15px,#7089cd 0),
linear-gradient(45deg, transparent 15px,#7089cd 0);
background-size: 60% 60%;
background-position: left top, right top, right bottom, left bottom;
background-repeat: no-repeat;
}