Here are some common and interesting CSS tricks

triangle

One of the most common shapes. Cut diagrams, they don’t exist.

/** triangle */. Triangle {width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; }Copy the code
/** ** /. Triangle {width: 0; height: 0; border-style: solid; border-width: 40px 25px 0 25px; border-color: rgb(245, 129, 127) transparent transparent transparent; }Copy the code

The dotted effect 

.dotted-line{
    border: 1px dashed transparent;
    background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}
Copy the code

> > < span style = “font-size: 16px! Important; The effect is too dense for the UI design

The specific color and spacing of dashed lines can be adjusted by using the fringed background generated by repeating-Linear-gradient.

Text exceeds ellipsis

Single-line text

.single-ellipsis{
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Copy the code

Multiline text

.multiline-ellipsis { display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 4; // The number of lines to display overflow: hidden; text-overflow: ellipsis; }Copy the code

Extension:

– Webkit-line-clamp is an unsupported webkit property that does not appear in the draft CSS specification.

To achieve this effect, it needs to combine other exotic WebKit properties. Common combination attributes:

  • display: -webkit-box; Properties that must be combined to display the object as an elastic stretchable box model.
  • -webkit-box-orient Specifies the attribute that must be attached to set or retrieve the arrangement of child elements of a flex box object.
  • Text-overflow, which can be used for multi-line text with ellipsis “…” Hide out-of-range text.

Browser compatibility:

The timeline

HTML structure

<div class="timeline-content">
  <div v-for='(item, index) in timeLine' :key='index' class="time-line">
    <div :class="`state-${item.state} state-icon`"></div>
    <div class="timeline-title">{{item.title}}</div>
  </div>
</div>
Copy the code

CSS styles

/** Timeline */. Timeline -content{display: flex; .time-line{ padding: 10px 10px 10px 20px; position: relative; &::before{ content: ''; height: 1px; width: calc(100% - 34px); background: #EBEBEB; position: absolute; left: 24px; top: 0; } } .state-icon{ width: 20px; height: 20px; position: absolute; top: -12px; left: 0; } .state-1{ background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-6bei-fen_1589266208621.png') no-repeat; background-size: cover; } .state-2{ background: url('https://static.daojia.com/assets/project/tosimple-pic/12_1589266226040.png') no-repeat; background-size: cover; } .state-3{ background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-3_1589266140087.png') no-repeat; background-size: cover; }}Copy the code

The calc() function is used to calculate the values of CSS properties.

Usage:

/** Attribute: calc (expression) */ width: calc (100%-34px);Copy the code

In addition to subtraction, you can use + (plus), /(division), * (times). But be warned:

Note: the + and – operators require a space between the operator and the value. For example, it will be interpreted by calC (50%-8px) as a percentage, followed by a negative pixel length. Subtracting is correct only if there is a space between – and 8px: calc(50% – 8px)

Spaces do not work in multiplication or division, but it is advisable to read with caution.

Browser compatibility:

The scroll bar

.scroll-container { height: 250px; border: 1px solid #ddd; padding: 15px; overflow: auto; .row { margin: 0; The line - height: 1.5; } &::-webkit-scrollbar { width: 8px; background: white; } &::-webkit-scrollbar-corner, /* webkit-scrollbar-thumb, &::-webkit-scrollbar-track {border-radius: 4px; } &::-webkit-scrollbar-corner, &::-webkit-scrollbar-track {/* scrollbar-track */ background-color: rgba(180, 160, 120, 0.1); Box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); } &::-webkit-scrollbar-thumb {/* scrollbar */ background-color: #00adb5; }}Copy the code

Card voucher effect

.coupon{ width: 300px; height: 100px; position: relative; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat; Filter: drop-shadow(2px 2px rgba(0,0,0,.2)); }Copy the code

shadows

Shadow-triangle {width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent rgb(245, 129, 127) transparent; Filter :drop-shadow(10px 0px 10px rgba(238, 125, 55,0.5)); } // circle. circle-square{width:100px; height:50px; line-height: 50px; background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px); Filter: drop-shadow(2px 2px rgba(238, 132, 66, 0.9)); } // bubble shadow. Tip {width: 100px; height: 30px; line-height: 30px; border: 1px solid rgb(245, 129, 127); border-radius: 4px; position: relative; background-color: #fff; Filter: drop-shadow(0px 2px 4px Rgba (245, 129, 127, 0.9)); &::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #fff transparent; position: absolute; top: -10px; left: 0; right: 0; margin: auto; z-index: 2; } &::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent rgb(245, 129, 127) transparent; position: absolute; top: -11px; left: 0; right: 0; margin: auto; z-index: 1; }}Copy the code

Such as the layout

There’s nothing a Flex can’t handle.

.parent{
    display: flex;
 }
Copy the code

If a row does not fit, you can fold it.

.parent{
  flex-wrap: wrap;
}
Copy the code

conclusion

Here are some static styles, as well as some more interesting dynamic styles. I hope to share them with you. If you have more interesting CSS tips, please leave them in the comments