How to concave a straight line with pure css

2019-07-11 02:56发布

站内问答 / HTML/CSS
355 2 2

enter image description here 

#diamond{
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background: red;
}
<html>
  <body>
      <div id="diamond"></div>
  </body>
</html>

I'm trying to create a diamond shape with css. However, the diamond that I want to create is not made up of straight lines, but four slightly concave lines, like the bicycle cards. Is it possible to concave a straight line in css?

2条回答
傲
2楼-- · 2019-07-11 03:27

I believe a simple <svg> path is the way to go here. A clear advantage is displaying it inline, as a normal letter:

Note I added some JS and a slide input to allow changing font-size dynamically. They're not part of the actual answer.

// js is not part of the answer
document.querySelector('input').addEventListener('input', function(e){
  document.body.style.fontSize = this.value + 'em'
})
svg.diamond {
  height: .75em;
}
body {
  font-size: 9em;
  font-family: serif;
  color: red;
}
/* answer CSS ends here */

input {
  position: absolute;
  display: block;
  text-align: center;
  width: 60vw;
  top: 0; left: 20vw;
}
5<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 360 480" style="enable-background:new 0 0 360 480;" xml:space="preserve"
   class="diamond">
   <path fill="currentColor" d="M180,0C133.3,94.3,72,175.9,0,240c72,64.1,133.3,145.7,180,240c46.7-94.3,108-175.9,180-240C288,175.9,226.7,94.3,180,0z"/>
</svg>

<!-- answer markup ends here -->  

<input type="range" value="9" min="1" max="33" step=".01">

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
3楼-- · 2019-07-11 03:36

Here is an idea using radial-gradient but without transparency:

#diamond {
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background: 
    radial-gradient(circle at -220% 50%, #fff 70%,transparent 71%),
    radial-gradient(circle at 320% 50%, #fff 70%,transparent 71%),
    radial-gradient(circle at 50% 320% , #fff 70%,transparent 71%),
    radial-gradient(circle at 50% -220% , #fff 70%,transparent 71%),
    linear-gradient(red,red) content-box;
  padding:1px;
  margin:20px;
}
<div id="diamond"></div>

You can also easily do this with SVG:

svg {
  margin:20px;
  width:70px;
}
<svg
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 64 64'
  fill='red'>
  <path d='M0 32 
          C20 44 20 44 32 64 
          C44 44 44 44 64 32 
          C44 20 44 20 32 0 
          C20 20 20 20 0 32 Z' />
</svg>

To edit the shape : http://jxnblk.com/paths/?d=M0 32 C20 44 20 44 32 64 C44 44 44 44 64 32 C44 20 44 20 32 0 C20 20 20 20 0 32 Z

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)