<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.dotted {
position: relative;
background: -o-linear-gradient(left, #5d95e0, #697dde);
background: -o-linear-gradient(right, #5d95e0, #697dde);
background: -moz-linear-gradient(right, #5d95e0, #697dde);
background: linear-gradient(to right, #5d95e0, #697dde);
width: 300px;
height: 200px;
}
.dotted:before {
content: ' ';
width: 0;
height: 100%;
position: absolute;
/* 小球形状 */
border-right: 6px dotted white;
left: -3px;
top: 0px;
}
</style>
<body>
<div class="dotted"></div>
</body>
</html>
效果图
