ドンピシャなSVGがございまして
4Like
下の写真の右側、矢印の背景に丸をHTMLとCSSで作りたいのですが、いくら考えても分かりません。分かる方がいれば、コードを教えていただきたいです!
<div class="system_btn js-fade">
<a href="about.html" class="system_btn">
VIEW MORE
<span class="dli-arrow-right"></span>
</a>
</div>
.system_btn {
display: block;
width: 174px;
}
.system_btn a {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
padding-left: 20.5px;
padding-right: 20.5px;
cursor: pointer;
border-bottom: 1px solid #000000;
}
.dli-arrow-right {
display: inline-block;
vertical-align: middle;
color: #333;
line-height: 1;
position: relative;
width: 12px;
height: 0.1em;
background: currentColor;
}
.dli-arrow-right::before {
content: '';
width: 0.65em;
height: 0.65em;
border: 0.1em solid currentColor;
border-left: 0;
border-bottom: 0;
transform: rotate(45deg);
transform-origin: top right;
position: absolute;
top: 50%;
right: -0.05em;
box-sizing: border-box;
}
ドンピシャなSVGがございまして
border-radiusプロパティで実現できます
今回のように円を作りたいのであれば
.button {
border-radius: 100vmax;
}
を指定すると良いでしょう
参考:
https://zenn.dev/necscat/articles/bc9bba54babaf5#border-radius%3A-100vmax
提示のコードに少し手を入れて実現したものはこちら
See the Pen Untitled by southkey47 (@southkey47) on CodePen.
実環境の仕様と異なるためpx指定に直したりしていますが、流用するのであれば適宜修正してください
簡単な解説としては.dli-arrow-right
自体を黒背景の円にし、疑似要素で矢印を作っています
「html css arrow in circle」などをキーワードにググってみてはいかがですか?