使用 css 的圆圈内的细箭头（用于 React）答案

【问题标题】：Thin arrow inside circle using css (for use with React)使用 css 的圆圈内的细箭头（用于 React）
【发布时间】：2021-11-19 19:00:08
【问题描述】：

我在圆圈内发现了一些有趣的箭头，这里是-

[Codepen](https://codepen.io/SachaJolly/pen/oWQMoG)

我从网站上拿了这个例子 - https://freebiesupply.com/blog/css-arrows/
部分箭头链接 - 悬停时的圆圈（cf Google Home 网站）

我在 css 方面不是很有经验，所以我无法在我的应用程序中正确地制作相同的箭头。我尝试了不同的转换器到通常的 css，但没有成功。我只需要简单地定义这种样式（或者可能有另一种方法）并在 JSX 代码中使用它。

也许你有任何想法如何做到这一点？谢谢！

【问题讨论】：

您听说过 Material UI 吗？您必须安装库并导入图标。 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; 。可能你需要关闭这个问题。在此处输入并阅读文档mui.com/es/components/material-icons
当然可以，但是我有自己的风格，只想加一个箭头，但如果是唯一的方法，也许我会做。谢谢

标签： javascript css reactjs svg

【解决方案1】：

最好使用 SVG 或图标字体，如 material icons 或 fontawesome。它们最适合使用，易于操作。

如果你真的想在 css 中做，你可以这样做：

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrowDown {
  display: block;
  height: 2em;
  width: 2em;
  position: relative;
}
.arrowDown span:first-child,
.arrowDown span:last-child {
  display: block;
  height: 2em;
  width: 2px;
  background-color: red;
  position: absolute;
  top: 0;
  border-radius: 5.2px;
}
.arrowDown span:first-child {
  transform: rotate(40deg);
  left: 5.2px;
}
.arrowDown span:last-child {
  transform: rotate(-40deg);
  right: 5px;
}

<span class="arrowDown">
    <span></span>
    <span></span>
</span>

【讨论】：

你必须改变很多东西才能改变高度和宽度，就像箭头的位置一样；这就是为什么字体很好。

【解决方案2】：

我将 HTML 源代码复制并粘贴到本网站的转换器 https://pughtml.com 中得到以下内容：

<section className="centered-container"><a className="link link--arrowed" href="#">Ceci est un magnifique bouton<svg className="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <g fill="none" stroke="#2175FF" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
    <circle className="arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
    <path className="arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
  </g>
</svg></a></section>

我还将scss复制并粘贴到本网站的转换器https://jsonformatter.org/scss-to-css中以获得以下CSS：

html, body {
    background-color: #f5f5f5;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.centered-container {
    background-color: #fff;
    display: inline-flex;
    padding: 4rem;
    border-radius: 0.125rem;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .04);
}
.link {
    color: #2175ff;
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
}
.link--arrowed {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
}
.link--arrowed .arrow-icon {
    position: relative;
    top: -1px;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    vertical-align: middle;
}
.link--arrowed .arrow-icon--circle {
    transition: stroke-dashoffset 0.3s ease;
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
}
.link--arrowed:hover .arrow-icon {
    transform: translate3d(5px, 0, 0);
}
.link--arrowed:hover .arrow-icon--circle {
    stroke-dashoffset: 0;
}

它对我有用。

【讨论】：