2 the shape
2.1 Adaptive ellipse
border-radius: 50%;
Copy the codeHalf elliptical
border-radius: 100% 0 0 100% / 50%;
Copy the code
border-radius: 50% / 100% 100% 0 0;
Copy the code
border-radius: 100% 0 0 0;
Copy the code
2.2 Parallelogram
<a href="#yolo" class="button">
<div>Click me</div>
</a>
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
Copy the code
.button {
position: relative;
/* Other text color, inner margins, etc... * /
}
.button::before {
content: ' '; /* Create a rectangle with a false element */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
Copy the code2.3 Diamond pictures
<div class="picture">
<img src="./img/cat.jpg" alt="..." />
</div>
.picture {
width: 200px;
transform: rotate(45deg);
overflow: hidden;
}
.picture>img {
max-width: 100%;
The transform: rotate 45 deg (-) scale (1.42);
}
Copy the code
img {
width: 200px;
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0. 50%);
transition: 1s clip-path;
}
img:hover {
clip-path: polygon(0 0, 100% 0,
100% 100%, 0. 100%);
}
Copy the code2.4 Effect of corner cutting
div {
background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #58a 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
Copy the code
div {
background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 3%;
color: white;
}
Copy the code
div {
border: 20px solid #58a;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%2358a">\
<polygon points="0,1, 0,2,0, 3,1,2, 2,3, 1,3, 0,2"/>\
</svg>');
background: #58a;
color: white;
background-clip: padding-box;
}
Copy the codeCutting path method
div {
background: #58a;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
}
Copy the code2.4 Ladder Label
.div {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.div::before {
content: ' ';
/* Create a rectangle with a false element */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #58a;
The transform: scaleY (1.3) perspective (. 5 em) rotateX (5 deg);
transform-origin: bottom;
}
Copy the code
<nav>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">About</a>
</nav>
nav>a{
position: relative;
display: inline-block;
padding: .3em 1em 0;
}
nav>a::before{
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #ccc;
Background - image: linear - gradient (hsla (. % 0, 0, 100%, 6), hsla (% 0, 0, 100%, 0));
Border: 1 px solid rgba (0, 0,. 4);
border-bottom: none;
border-radius: .5em .5em 0 0;
transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
Copy the code
2.5 Simple pie chart
Transform-based solutions
<style lang="scss">
body{
height: 100vh;
}
.pie {
height: 200px;
position: relative;
width: 200px;
line-height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image:
linear-gradient(to right, transparent 50%, # 655 0);
color: transparent;
text-align: center;
margin: 5%;
}
@keyframes spin {
to {
transform: rotate(.5turn);
}
}
@keyframes bg {
50% {
background: # 655;
}
}
.pie::before {
content: ' ';
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</style>
</head>
<body>
<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>
</body>
Copy the code
svg {
width: 100px;
height: 100px;
transform: rotate(-45deg);
background: yellowgreen;
border-radius: 50%;
}
circle {
fill: yellowgreen;
stroke: # 655;
stroke-width: 32;
stroke-dasharray: 38 100;
/* Yields a sector with a ratio of 38% */
}
<svg viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16" />
</svg>
Copy the code