css закругленный угол прямоугольного треугольника - PullRequest
Новая
       54

css закругленный угол прямоугольного треугольника

0 голосов
/ 01 марта 2019

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

Вот вывод вместе с взорванным изображением формы:

enter image description here

Используемый код ниже: 

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0.12em;
}
<h1>Heading</h1>

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

Ответы [ 4 ]

0 голосов
/ 01 марта 2019

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

h1 {
  padding-left:1em;
  position:relative;
}

h1:before {
  content: "";
  position:absolute;
  left: 0;
  top: calc(50% - 0.35em);
  width: 0.7em;
  height: 0.7em;
  background: linear-gradient(to bottom left, #34495e 50%, transparent 50%);
  border-radius: 0.1em;
}
h1:after {
  content: "";
    position: absolute;
    left: 3.8px;
    top: -0.1px;
    width: 0.92em;
    height: 0.8em;
    margin-right: 10px;
    background: linear-gradient(to top,#34495e 3.5px,transparent 5px);
    border-radius: 0.1em;
    transform: rotate(45deg);
    z-index: -1;
}
<h1>Heading</h1>
0 голосов
/ 01 марта 2019

Вы можете добавить дополнительные стили к каждому углу в вашем CSS, добавив: 

border-radius: 0.4em 0.1em 0.4em 0.1em

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

0 голосов
/ 01 марта 2019

Помимо SVG или построения кривых вручную в clip-path, вы можете добавить элемент :after, который будет выступать в качестве изогнутой гипотенузы.В нем много магических чисел для правильного определения размера и размещения, поэтому я не уверен, насколько он масштабируем, но, по крайней мере, он поможет вам с CSS в этой единственной ситуации. 

h1 {
position: relative;
}

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0.12em;
}

h1:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: .24em;
  top: .123em;
  
  width: 0.2em;
  height: 0.87em;
  background-color:  #34495e;
  border-radius: 0.12em;
  transform: rotate(-45deg);
  transform-origin: center;
}
<h1>Heading</h1>
0 голосов
/ 01 марта 2019

Это потому, что вы округляете весь узел.Применить border-radius только к верхнему правому углу 

h1:before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 10px;
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
  background-color:  #34495e;
  border-radius: 0 0.12em 0 0;
}
<h1>Heading</h1>
...