Что вы должны знать о «CSS Reveal» — Shapes

.demo{
    border-radius: 100px / 75px;
}

.demo{
   border-radius:10px 20px 30px 40px / 50px 60px 70px 80px;
   /* 斜杠（/）前代表水平半径，后代表垂直半径，顺序分别为左上角开始，顺时针走向，所以这段代码表示左上角(10px/50px) 右上角（20px/60px）右下角（30px/70px）左下角（40px/80px） */
}

.demo{
    border-top-left-radius:10px/50px;
    border-top-right-radius:20px/60px;
    border-bottom-right-radius:30px/70px;
    border-bottom-left-radius:40px/80px;
}

.ellipse{
    border-radius:50%;
}

.parallelograms{
    transform: skew(-45deg);
    /*...... */
}

<div class="parallelograms">
    <div>二十首情诗与绝望的歌</div>
</div>

 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    background-color: #58a;
    transform:skew(-45deg);
}
.parallelograms div{
    transform: skew(45deg);
}

 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    position: relative;
}
.parallelograms:before{
    content:'';
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #58a;
    transform:skew(-45deg);
    z-index: -1;
}

оберните его, а затем примените к нему противоположноеrotate()Стиль деформации:

<div class="diamond">
    <img src="https://avatars1.githubusercontent.com/u/8121621?v=4" alt="..." />
</div>

.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img {
    max-width: 100%;
    transform: rotate(-45deg);
}

Однако Бог не исполнил его желания! Проблема вmax-width:100%100% в нем относится к 100% ширины, что составляет 400px, а самая длинная сторона квадрата после поворота является диагональной линией, которая в 2 раза больше ширины корневого знака.Ширина естественного изображения не достаточно, мы можем использовать стиль деформации scale(), чтобы увеличить это изображение. После того, как мы найдем проблему, мы ее устраним,

код показывает, как показано ниже:

.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}

Этот метод требует дополнительного уровня HTML-тегов, которым мы не уделяем должного внимания. В то же время самая большая проблема заключается в том, что он может обрабатывать только квадратные изображения, иначе он выйдет из строя.

Мы использовали технику псевдоэлементов в предыдущем разделе, и ее также можно использовать здесь Код выглядит следующим образом:

 .diamond{
    margin:30px auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    transform: rotate(45deg);
}
.diamond:before{
    content:'';
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom:0;
    transform: rotate(-45deg) scale(1.42);
    background: url(https://avatars1.githubusercontent.com/u/8121621?v=4);
    background-size: cover;
}

Принцип тот же, что и выше, с помощью структурного слоя, поэтому, столкнувшись с той же проблемой, можно обрабатывать только квадратные изображения.

Далее мы используем более полезный метод для решения изображения, которое не является квадратным. (схема обтравочного контура)

Код броска:

.diamond{
    /*......*/
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

clip-pathСвойства заимствованы из svg, а обтравочные контуры позволяют нам обрезать элементы до любой желаемой формы. Функция polygon() позволяет нам указывать произвольные многоугольники с серией (разделенных запятыми) координатных точек.

Этот метод также может реализовать параллелограмм в предыдущей главе, скошенные углы, трапеции и другие произвольные формы в следующих главах, просто нужно расположить координатные точки по порядку, в следующих главах не будет слишком много, вы можете попробовать больше.

Эффект фаски

Эффект вырезания, легко думать о моей последней статьеЧто вы должны знать о «CSS Revealed» — предыстория и границыЛинейные градиенты, используемые при создании полосатых фонов вlinear-gradient()

Мы можем легко добиться эффекта срезанного угла, код выглядит следующим образом:

.bevel-corners{
    background: #58a; /*linear-gradient不支持的情况下，作为代码回退机制*/ 
    background:linear-gradient(-45deg, transparent 15px, #58a 0);
}

Затем используйте двухслойный градиентный фон, чтобы два угла были обрезаны.

Чтобы сначала проанализировать это, по умолчанию оба слоя градиентов заполняют весь элемент, поэтому они перекрывают друг друга. Нам нужно сделать их все меньше, поэтому мы используемbackground-sizeСделайте так, чтобы каждый слой градиента занимал только половину площади всего элемента, иbackground-repeatустановить какno-repeat.

код показывает, как показано ниже:

.bevel-corners{
    background: #58a;
    background:
    linear-gradient(-45deg, transparent 15px, #58a 0) right,
    linear-gradient(45deg, transparent 15px, #58a 0) left;
    background-size:50% 100%;
    background-repeat:no-repeat;
}

По такому же принципу мы меняем каждый слой градиента на четверть всего элемента, тогда четыре слоя градиентного цвета могут добиться обрезания четырех углов.

код показывает, как показано ниже:

.bevel-corners{
    background:#58a;
    background:
    linear-gradient(-45deg,transparent 15px, #58a 0) bottom right,
    linear-gradient(45deg,transparent 15px, #58a 0) bottom left,
    linear-gradient(135deg,transparent 15px, #58a 0) top left,
    linear-gradient(-135deg,transparent 15px, #58a 0) top right;
    background-size:50% 50%;
    background-repeat:no-repeat;
}

Продолжайте увеличивать сложность достиженияДуговая фаска, Принцип тот же, меняем суп, не меняя лекарство, просто меняем линейный градиент на радиальный градиент.

Код реализации выглядит следующим образом:

.scoop-corners{
    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;
}

простая круговая диаграмма

Реализуйте последний график — круговую диаграмму (зеленый для круговой диаграммы, коричневый для отображения соотношений)

решения на основе преобразования

Идея: задайте левую и правую части круга двумя вышеуказанными цветами, затем покройте их псевдоэлементами и поверните их так, чтобы Решите, насколько большой сектор выставить.

Код круговой диаграммы для 20% выглядит следующим образом:

.pie {
    width: 100px; 
    height: 100px;
    border-radius: 50%; 
    background: yellowgreen;
    background-image:linear-gradient(90deg, transparent 50%, #655 0);
}
.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: inherit; 
    transform-origin: left;
    transform: rotate(.2turn);
}

Когда поворот превышает 50 %, круговая диаграмма принимает следующий вид:

Затем мы можем изменить цвет повернутого псевдоэлемента на коричневый, чтобы получить круговую диаграмму с соотношением 50%-100%.

Код круговой диаграммы для 60% выглядит следующим образом:

.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: #655; 
    transform-origin: left;
    transform: rotate(.1turn);
}

Если эта статья поможет вам, пожалуйста, поставьте лайк 👍, у меня будет больше мотивации творить!