带有 CSS 的圆形复选标记角。可能吗？答案

【问题标题】：Round checkmark corners with CSS. Is it possible?带有 CSS 的圆形复选标记角。可能吗？
【发布时间】：2020-03-18 17:43:48
【问题描述】：

我已经构建了这个使用复选标记的简单无序列表。复选标记对它们没有任何圆形样式。基本上想为它们添加一个边界半径，但这在理论上是行不通的。它只会围绕元素的外部。甚至可以将复选标记的尖端四舍五入吗？如果有办法，我认为使用边框不是正确的方法吗？我现在不确定。任何帮助将不胜感激。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px 0px 0px 15px;
} 

ul li:not(:last-child) {
 margin-bottom: 10px;
}

ul li::before{
  content: '';
  display: table;
  display: inline-block;
  transform: rotate(35deg);
  height: 12px;
  width: 5px;
  border-bottom: 2px solid #eb0a1e;
  border-right: 2px solid #eb0a1e;
  position: absolute;
  left: 5px;
  margin-top: 0px;
}

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

【问题讨论】：

您可以使用两个伪元素，一个用于小茎，一个用于高茎，并使它们具有相同的高度并赋予它们相同的半径。在交叉路口将它们重叠，您就可以出发了。
试试 Font-Awesome？它们具有广泛的复选标记，可以轻松添加到您的 CSS 中

标签： html css user-interface frontend

【解决方案1】：

这是一个使用一个元素的想法：

.tick {
    display: inline-block;
    height: 60px;
    width: 100px;
    border-bottom-left-radius: 30px;
    background:
      radial-gradient(farthest-side at top right,transparent 97%,green 100%) bottom 19px left 19px/15px 15px content-box padding-box,  
      radial-gradient(farthest-side,green 98%,transparent 100%) top left    /20px 20px,
      radial-gradient(farthest-side,green 98%,transparent 100%) bottom right/20px 20px,
      linear-gradient(green,green) left bottom/20px calc(100% - 10px),
      linear-gradient(green,green) left bottom/calc(100% - 10px) 20px;
    background-repeat:no-repeat;
    transform:rotate(-45deg);
}

&lt;div class="tick"&gt;&lt;/div&gt;

在哪里可以考虑使用 CSS 变量来轻松控制形状：

.tick {
    --c:green; /* Color */
    --t:20px;  /* thickness */
    --r:30px;  /* Radius */
    --w:100px; /* width */
    --h:60px;   /* height */
    display: inline-block;
    height: var(--h);
    width: var(--w);
    border-bottom-left-radius: var(--r);
    background:
      radial-gradient(farthest-side at top right,transparent 97%,var(--c) 100%) bottom calc(var(--t) - 0.5px) left calc(var(--t) - 0.5px)/calc(var(--t) * 0.8) calc(var(--t) * 0.8),  
      radial-gradient(farthest-side,var(--c) 99%,transparent 100%) top left    /var(--t) var(--t),
      radial-gradient(farthest-side,var(--c) 99%,transparent 100%) bottom right/var(--t) var(--t),
      linear-gradient(var(--c),var(--c)) left bottom/var(--t) calc(100% - var(--t)/2),
      linear-gradient(var(--c),var(--c)) left bottom/calc(100% - var(--t)/2) var(--t);
    background-repeat:no-repeat;
    transform:rotate(-45deg);
}

<div class="tick"></div>

<div class="tick" style="--t:10px;--r:20px;--c:red;"></div>

<div class="tick" style="--t:8px;--r:10px;--w:50px;--h:30px;--c:blue;"></div>

您可以稍后将其放置在您的伪元素中：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px 0px 0px 18px;
} 

ul li:not(:last-child) {
 margin-bottom: 10px;
}

ul li::before {  
     content: '';
      position: absolute;
      left: 8px;
    --t:9px;
    --r:10px;
    --w:45px;
    --h:25px;
    --c:red;
    height: var(--h);
    width: var(--w);
    border-bottom-left-radius: var(--r);
    background:
      radial-gradient(farthest-side at top right,transparent 97%,var(--c) 100%) bottom calc(var(--t) - 0.5px) left calc(var(--t) - 0.5px)/calc(var(--t) * 0.8) calc(var(--t) * 0.8),  
      radial-gradient(farthest-side,var(--c) 99%,transparent 100%) top left    /var(--t) var(--t),
      radial-gradient(farthest-side,var(--c) 99%,transparent 100%) bottom right/var(--t) var(--t),
      linear-gradient(var(--c),var(--c)) left bottom/var(--t) calc(100% - var(--t)/2),
      linear-gradient(var(--c),var(--c)) left bottom/calc(100% - var(--t)/2) var(--t);
    background-repeat:no-repeat;
    transform:rotate(-45deg) scale(0.4);
    transform-origin:left;
}

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

【讨论】：

【解决方案2】：

不是最好的复选标记，但这是我尝试使用两个伪来创建复选标记。

但如果我是你，我会寻找 SVG 或类似 Font-awesome 的东西。除非您打算对复选标记做一些特殊的动画，否则这就足够了。

.list {
  list-style: none;
}
.list li {
  position: relative;
  z-index: 1;
}
.list li:not(:last-child) {
  margin-bottom: 6px;
}
.list li:before, .list li:after {
  content: "";
  position: absolute;
  z-index: 5;
  border-radius: 4px;
  height: 4px;
}
.list li:after {
  left: -21px;
  width: 10px;
  background: red;
  transform: rotate(-115deg);
  top: 8px;
}
.list li:before {
  left: -17px;
  width: 15px;
  background: red;
  transform: rotate(-45deg);
  top: 6px;
}

<ul class="list">
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 1</li>
</ul>

【讨论】：

【解决方案3】：

重叠两个伪元素，这两个伪元素都是圆角的词干。将他们的transform-origin 放在底部，减去半径（尝试使用不带半径的 100% 来查看原因）。

这是函数代码，但我冒昧地使用带有ems 的相对单位而不是pxs 以获得更好的缩放比例和更少的幻数。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px 0px 0px 1em;
} 

ul li + li {
 margin-top: 10px;
}

ul li {
  position: relative;
  padding-left: 1em;
}

ul li::before,
ul li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .25em;
  display: table;
  display: inline-block;
  width: .125em;
  border-radius: .125em;
  background: #eb0a1e;
  transform-origin: 50% calc(100% - .0625em);
}

ul li::before {
  height: .875em;
  transform: rotate(35deg);
}

ul li::after {
  height: .4375em;
  transform: rotate(-55deg); /* Initially, the group was rotated by -35deg, so the tall stem has been rotated by 35deg, and the small one, which is at a right angle, by 35-90=-55deg */
}

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

【讨论】：