This is the sixth day of my participation in Gwen Challenge

Effect of cutting Angle

problem

Nowadays, many developers prefer to use background images for this purpose, such as using triangles to cover the top angles of elements to simulate champers, or using one or more already champed images as the background of the entire element.

The solution

Gradients can accept an Angle (such as 45DEg) as a direction, and the color label position information can also be an absolute length value, regardless of the container size.

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

If you need to modify the background color in five places with the above code and change the Angle size in four places, you can use SCSS to write it, the code is as follows:

@mixin beveled-corners($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) {
    background: $bg;
    background:
        linear-gradient(135deg, transparent $tl, $bg 0) top left,
        linear-gradient(225deg, transparent $tr, $bg 0) top right,
        linear-gradient(-45deg, transparent $br, $bg 0) bottom right,
        linear-gradient(45deg, transparent $bl, $bg 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat; } / / calls@include beveled-corners(#58a, 15px.5px);
Copy the code

Arc corner cut

Concave rounded corners (opposite to rounded corners) can be achieved by using a radial gradient instead of the linear gradient described above.

background: greenyellow;
background:
    radial-gradient(circle at top left,
    transparent 15px, greenyellow 0) top left,
    radial-gradient(circle at top right,
    transparent 15px, greenyellow 0) top right,
    radial-gradient(circle at bottom right,
    transparent 15px, gold 0) bottom right,
    radial-gradient(circle at bottom left,
    transparent 15px, gold 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
Copy the code

Inline SVG with the border-image scheme

The code for the gradient scheme is tedious and requires multiple changes if you want to change it. So use the border-image and create the corner cutting effect with an inline SVG image. Since size doesn’t matter (border-image takes care of scaling, while SVG can achieve perfect scaling completely independent of size — that’s the benefit of vector graphics), the size of each slice can be set to 1 for understanding and writing. The Angle of the cut is 1, and the edges of the line are all 1.

border: 15px solid transparent;
border-image: 1 url('data: image/SVG + XML, < SVG XMLNS = "http://www.w3.org/2000/svg" width = "3" height = "3" the fill = "% 2358 a" > < polygon points = "0, 1, 1, 0 2,0, 3,1,2, 2,3, 0,2"/>
      ');
Copy the code

This creates a rectangle with a corner border that needs to be added with a background color. So add:

background: #58a;
Copy the code

However, the cut Angle is missing, as shown in Figure 2 below, so background-clip is used to prevent the background color from spreading into the border area.

background-clip: padding-box;
Copy the code

Set a border color for div that matches the background color. When border-image is in effect, the border is ignored. Border color can provide a smoother rollback when border-image is not in effect.

Trapezoidal TAB

problem

The definition of a trapezoid is a bit broader than a parallelogram: it only takes two sides to be parallel, and the other two sides can be at any Angle.

The solution

If you rotate a rectangle in the real three-dimensional world, the final two-dimensional image you see is a trapezoid due to perspective. You can use the 3D rotation simulation effect in CSS.

transform: perspective(.5em) rotateX(5deg);
Copy the code

However, after transformation, it was found that the text of the content was also changed, and after 3D deformation was applied to the element, the internal deformation effect was “irreversible”, which was different from that of 2D, so the deformation could only be applied to the pseudo-element.

nav>a {
    position: relative;
    display: inline-block;
    padding: 1em 3em .1em;
}
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: 1px solid rgba(0.0.0.4);
    border-bottom: none;
    border-radius:.5em .5em 0 0;
    box-shadow: 0 .15em white inset;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}
nav>a:nth-child(2)::before{
    transform-origin: bottom left;
}
nav>a:nth-child(3)::before{
    transform-origin: bottom right;
}
Copy the code

Simple pie chart

Transform-based solutions

HTML

<div class="pie">0%</div>
<div class="pie">20%</div>
<div class="pie">40%</div>
<div class="pie">60%</div>
<div class="pie">80%</div>
Copy the code

CSS

.pie {
	display: inline-block;
	position: relative;
	width: 100px;
	line-height: 100px;
	border-radius: 50%;
	background: yellowgreen;
	background-image: linear-gradient(to right, transparent 50%, salmon 0);
	color: transparent;
	text-align: center;
}

@keyframes spin {
	to { transform: rotate(.5turn); }}@keyframes bg {
	50% { background: salmon; }}.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;
}
Copy the code
JS

function $$(selector, context) {
    context = context || document;
    var elements = context.querySelectorAll(selector);
    return Array.prototype.slice.call(elements);
}

$$('.pie').forEach(function (pie) {
    var p = pie.textContent;
    pie.style.animationDelay = The '-' + parseFloat(p) + 's';
});
Copy the code

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.