1. Rounded corners in the frame

Sometimes we need a container that only has rounded corners on the inside, while the four corners of the border or stroke remain right angles on the outside. The most common way to achieve this effect is to use two elements. Here’s how to use one element.

// HTML
<div class="elemt"></div>

// CSS
.elemt{
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 12px #655;
  background: tan;
  outline: 6px solid #655;
  border-radius: 6px;
}
Copy the code

The effect is as follows:

2, all kinds of stripe background

2.1 Horizontal and vertical fringe
// HTML <div class="elemt"></div> // CSS /* Horizontal */. Field {width: 300px; height: 300px; background: linear-gradient(#fb3 50%, #58a 0); background-size: 100% 30px; } /* Elemt {width: 300px; height: 300px; background: linear-gradient(90deg, #fb3 50%, #58a 0); background-size: 30px 100%; }Copy the code

The effect is as follows:

2.2 Oblique fringe
// HTML <div class="elemt"></div> // CSS /* oblique */. Field {width: 300px; height: 300px; background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0); Background - size: 42.4 px 42.4 px; }Copy the code

The effect is as follows:

2.3 Grid Background
// HTML
<div class="elemt"></div>

// CSS
.elemt {
    width: 300px;
    height: 300px;
    background: #58a;
    background-image: linear-gradient(white 2px, transparent 0),
      linear-gradient(90deg, white 2px, transparent 0),
      linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
      linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
    background-size: 50px 50px, 50px 50px,
      10px 10px, 10px 10px;
}
Copy the code

The effect is as follows:

2.3 Wave point background
// HTML
<div class="elemt"></div>

// CSS
.elemt {
    width: 300px;
    height: 300px;
    background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
    background: #655;
    background-image: radial-gradient(tan 20%, transparent 0),
      radial-gradient(tan 20%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
Copy the code

The effect is as follows:

2.4 Checkerboard Background
// HTML <div class="elemt"></div> // CSS /* elemt {width: 300px; height: 300px; background: #eee; background-image: linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0), linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0); background-position: 0 0, 15px 15px; background-size: 30px 30px; } /* elemt {width: 300px; height: 300px; background: #eee url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\ <rect x="50" width="50" height="50" />\ <rect y="50" width="50" height="50" />\ </svg>'); background-size: 30px 30px; }Copy the code

The effect is as follows:

3. “Old envelope” border style

// HTML <div class="elemt"></div> // CSS /* elemt{width: 300px; height: 300px; border: 1em solid transparent; background: Linear-gradient (white, white) padding-box, repeating-Linear-gradient (-45deg, Red 0, red 12.5%, transparent 0, 58 a 0, 25% transparent, # # 58 37.5%, a transparent 0, 0/6), 50% transparent em em; } /* elemt{width: 300px; height: 300px; border: 1em solid transparent; border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em); }Copy the code

The effect is as follows:

4. Circle and ellipse

Setting the width and height of the elements to be unequal results in an ellipse

/ / HTML < div class = "elemt" > < / div > / / CSS -- -- -- -- -- - circle. Elemt {width: 16 em; height: 16em; background: #fb3; border-radius: 50%; } // CSS ------ elliptic. elemt{width: 16em; height: 10em; background: #fb3; border-radius: 50%; }Copy the code

The effect is as follows:

5. Semi-ellipse

// HTML 
<div class="elemt"></div>
<div class="elemt"></div>
<div class="elemt"></div>
<div class="elemt"></div>

// CSS
.elemt{
    width: 16em;
    height: 16em;
    margin: 1em;
    background: #fb3;
    border-radius: 50% / 100% 100% 0 0;
    display: inline-block;
}

.elemt:nth-of-type(2) { border-radius: 50% / 0 0 100% 100%; }
.elemt:nth-of-type(3) { border-radius: 100% 0 0 100% / 50%; }
.elemt:nth-of-type(4) { border-radius: 0 100% 100% 0 / 50%; }
Copy the code

The effect is as follows:

6. A quarter ellipse

// HTML 
<div class="elemt"></div>
<div class="elemt"></div>
<div class="elemt"></div>
<div class="elemt"></div>

// CSS
.elemt{
    width: 16em;
    height: 16em;
    margin: 1em;
    background: #fb3;
    border-radius: 100% 0 0 0;
    display: inline-block;
}

.elemt:nth-of-type(2) { border-radius: 0 100% 0 0; }
.elemt:nth-of-type(3) { border-radius: 0 0 100% 0; }
.elemt:nth-of-type(4) { border-radius: 0 0 0 100%; }
Copy the code

The effect is as follows:

parallelogram

The following is done with pseudo-elements, or nested elements

// HTML
<div class="elemt"></div>

// CSS
.elemt{
    position: relative;
    width: 16em;
    height: 16em;
    background: transparent;
}

.elemt::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #58a;
    transform: skew(-45deg);
}
Copy the code

The effect is as follows:

8, the diamond

Transform: Rotare (45deg). The clip-path property is used as an easy way to do this.

//HTML
<div class="elemt"></div>

//CSS
.elemt{
    width: 250px;
    height: 250px;
    background: #58a;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
Copy the code

The effect is as follows:

9. Angle cutting effect

When faced with this effect, we first thought of using triangles to cover the top corners of the elements to simulate champers (when the background of the page is a solid color), or using one or more already champed images as the background of the entire element. But there’s an easier way to do it.

Plan 1: gradient
// HTML <div class="elemt"></div> // CSS .elemt{ width: 250px; height: 250px; /* / 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 left, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right; /* / 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; }Copy the code
Solution 2: Clip-path
// HTML
<div class="elemt"></div>

// CSS
.elemt{
    width: 250px;
    height: 250px;
    background: #58a;
    clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0px 100%, 0 calc(100% - 20px), 0 20px);
}
Copy the code

The effect is as follows:

10, trapezoidal

// HTML <div class="elemt"></div> // CSS .elemt{ position: relative; width: 300px; height: 300px; } .elemt::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #58a; The transform: scaleY (1.3) perspective (. 5 em) rotateX (5 deg); transform-origin: bottom; }Copy the code

The effect is as follows:

11. Draw a pie chart in SVG

// HTML <svg viewBox="0 0 32 32"> <circle r="16" cx="16" cy="16"> </svg> // CSS svg{ width: 100px; height: 100px; transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; } circle{ fill: yellowgreen; stroke: #655; stroke-width: 32; stroke-dasharray: 0 100; animation: fillup 5s linear infinite; } @keyframes fillup { to{ stroke-dasharray: 100 100; }}Copy the code

The effect is as follows:

12, folding effect

// HTML <div class="elemt"></div> // CSS .elemt{ position: relative; width: 250px; height: 250px; margin: 50px; background: #58a; border-radius: .5em; Background: Linear-gradient (-150deg, transparent 1.75em, #58a 0); } .elemt::before { content: ''; position: absolute; top: 0; right: 0; Width: 1.73 em. height: 3em; background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat; The transform: translateY (1.3 em) rotate 30 deg (-); transform-origin: bottom right; border-bottom-left-radius: .5em; box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15); }Copy the code

But the above scheme if you want to change the Angle of the fold, you need to modify five places, for a more flexible scheme, please click here, using CSS processors.

The effect is as follows:

13. Close to the bottom footer

Having a block-level footer (such as one with a background or shadow) works fine when the page content is long enough, but when the page is short (such as an error message page) it can be problematic. The problem here is that the footer does not “stick” at the bottom of the viewport as we would expect, but rather follows directly below the content.

// HTMl
<header></header>
<main><main>
<footer></footer>

// CSS
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}
Copy the code

Please refer to the specific effecthere

14. Typing animation

// HTML <h1>CSS is so awesome! </h1> // CSS h1{ width: 15ch; white-space: nowrap; overflow: hidden; border-right: .05em solid; font: bold 200% Consolas, Monaco, monospace; animation: typing 8s steps(15), caret 1s steps(1) infinite; } @keyframes typing{ from{ width: 0; } } @keyframes caret{ 50%{ border-right-color: transparent; } } // JS let text = document.getElementsByTagName('h1'); text[0].style.width = text[0].outerText.length + 'ch'; text[0].style.animationTimingFunction = "steps("+ text[0].outerText.length +"), steps(1)";Copy the code

The effect is as follows:

Finally, I am reading the book “CSS Secrets revealed” recently. By the way, I will sum up my good points, so that I can be lazy and save time. If there is any incorrect place in the article, please leave a message to remind me (please spray lightly), if JiO is good, please XDJMM point to encourage, support, thank you dig friends! More effects in the book,Please click here!