Как вогнуть прямую линию с чистым CSS - PullRequest
Новая
       50

Как вогнуть прямую линию с чистым CSS

0 голосов
/ 22 октября 2018

enter image description here

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

Я пытаюсь создать ромбовидную форму с помощью css.Однако бриллиант, который я хочу создать, состоит не из прямых линий, а из четырех слегка вогнутых линий, как велосипедные карты.Можно ли вогнуть прямую линию в CSS?

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Я верю, что простой путь <svg> - это путь сюда.Явным преимуществом является отображение его встроенным, как обычная буква:

Примечание Я добавил несколько JS и слайд-ввод для динамического изменения размера шрифта.Они не являются частью реального ответа. 

// 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 голосов
/ 22 октября 2018

Вот идея с использованием radial-gradient, но без прозрачности: 

#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>

Вы также можете легко сделать это с 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>

Чтобы редактировать форму: 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

...