Строка с отступом круг

Я хотел бы знать, как реализовано это сердце с отступом вокруг него. Как я могу сделать так, чтобы кривые пошли? Возможно ли это с помощью CSS, HTML?

Я знаю, как реализовать сердце с помощью CSS или даже изображения, но изогнутая граница находится за пределами моих знаний.

border-radius в этом случае, похоже, не является решением.

border with indented circle

8
css css-shapes css3 svg

7 ответов

вот идея о том, как вы можете достичь этого макета с помощью встроенного svg.

в SVG :

  • первый путь-это линия с отступом окружности. Отступ окружности создается с помощью команды arc
  • второй элемент пути-контур сердца. Он использует команду кривой Безье для верхней части сердца.

img {
  width: 100%;
  display: block;
}
div {
  position: relative;
  height: 100px;
  background: #fff;
}
svg {
  position: absolute;
  bottom: 100%;
  width: 100%;
}
<img src="http://lorempixel.com/640/200" alt="">
<div>
  <svg viewbox="0 0 100 18.4">
    <path stroke="orange" stroke-width="0.8" fill="#fff" d="M-1 21 V18 H79.5 A7 7 0 1 1 90.5 18 H101 V21" />
    <path stroke="orange" stroke-width="0.8" fill="#fff" d="M85 18 L81 13 C80 10 85 10 85 12 C85 10 90 10 89 13z " />
  </svg>
</div>

для получения дополнительной информации о командах пути в SVG см. MDN

11

вы можете использовать псевдо-элемент:

$borderWidth: 3px;
$heartSize: 30px;
div {
  border-bottom: $borderWidth solid orange;
  position: relative;
}
div:after {
  content: '♡'; /* Heart character (U+2661) */
  font-size: 30px;
  height: $heartSize;
  width: $heartSize;
  line-height: $heartSize;
  text-align: center;
  position: absolute;
  bottom: -3*$borderWidth;
  right: 10%;
  border: $borderWidth solid orange;
  border-radius: 50%;
  background: #fff;
  clip: rect(0, $heartSize+2*$borderWidth, $heartSize, 0); /* Old syntax */
  clip-path: inset(0 0 2*$borderWidth 0); /* New syntax */
}


div {
  border-bottom: 3px solid orange;
  position: relative;
}
div:after {
  content: '♡'; /* Heart character (U+2661) */
  font-size: 30px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  bottom: -9px;
  right: 15%;
  border: 3px solid orange;
  border-radius: 50%;
  background: #fff;
  clip: rect(0, 36px, 30px, 0);
  -webkit-clip-path: inset(0 0 6px 0); /* Old syntax */
  clip-path: inset(0 0 6px 0); /* New syntax */
}
<div>Foo<br />bar</div>
6

поэтому лучшим решением для вашей проблемы было бы использовать SVG shape такой, или пользовательский шрифт, как вы можете изменить цвет и они будут хорошо масштабируются для сетчатки и т. д.

обычно CSS3 отлично подходит для создания основных фигур, однако, когда дело доходит до контурных фигур, он падает. Это связано с тем, что они обычно полагаются на создание нескольких фигур, используя до и после селекторов. Обычно это работает, но если вы хотите применить границу, это вызовет перекрытие проблемы с формой.

единственным реальным решением css было бы создать вторую форму сердца немного меньше в качестве маски. Но это выделение разметки, поэтому SVG действительно ваш лучший вариант.

быстрый и грязный пример и перекрывающееся сердце здесь https://jsfiddle.net/6qywoxsk/

.heart {
    position: absolute;
    width: 100px;
    height: 90px;
}
.heartCon{
    position:relative;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
.heart2{
     -ms-transform: scale(0.9); /* IE 9 */
    -webkit-transform: scale(0.9); /* Safari */
    transform: scale(0.9);
}
.heart2:before,
.heart2:after {
     background:#fff;   
     top: 0px;
}
<div class="heartCon">
  <div class="heart"></div>
  <div class="heart heart2"></div>
</div>
5

самое простое, безопасное и кросс-браузерное решение-использовать изображение.

другие способы: canvas, border-radius, transform или SVG.

3

Если вы действительно хотите сделать это с помощью css, вы можете попробовать некоторые веб-службы image-to-css (например,http://image2css.alexdoesit.com/ - только первый, чтобы выскочить в google)

хотя, самый простой и чистый способ сделать это с помощью прозрачного изображения.

Что касается реализации дуги в CSS3, этот ответ может помочь:как сделать формы дуги с CSS3?

1

CSS = border-radius + overflow:hidden;

  1. поместите круг как псевдо-элемент в блок с overflow:hidden;. Так мы получим дугу.

  2. берем сердце из шрифта Awesome. Чтобы установить значок с помощью CSS, создайте еще один блок с псевдо-элементом. Если бы сердце не выступало за нижнюю границу дуги, то ему не угрожало бы overflow:hidden; и мы поместили бы оба псевдо-элемента в один блок.

  3. расположите собранный блок поверх изображения с нижней оранжевой границей. Установите отрицательный bottom свойство опускать блок на глубину границы.

https://codepen.io/glebkema/pen/MoyXxp

.arch {
  overflow: hidden;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.arch:before {
  background: white;
  border: solid 3px orange;
  border-radius: 50%;
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute; top: 0; left: 0;
  width: 100%; height: 133.333333%;
}

.heart {
  position: absolute; bottom: -3px; right: 60px;
  width: 48px; height: 36px;
}
.heart:after {
  color: orange;
  content: '\f08a'; /* http://fontawesome.io/icon/heart-o/ */
  display: block;
  font-family: 'FontAwesome';
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  position: absolute; bottom: -4px; left: 0;
  text-align: center;
  width: 100%;
}

.photo {
  background: #9cf;
  border-bottom: solid 3px orange;
  height: 120px;
  position: relative;
}
<div class="photo"><div class="heart"><div class="arch"></div></div></div>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
0

вы можете достичь круглых форм с помощью CSS, используя border-radius свойства:

element {
border-radius: 999px;
border: 5px solid #000; // thick border
}

редактировать

к сожалению, ответ на этот вопрос преждевременно. Если вы не хотите решать эту проблему с помощью изображения, я мог бы придумать обходной путь.

нижняя оранжевая граница может быть <div> высотой 1px или 2px и шириной 100%. Элементом сердца может быть другой div, стилизованный, как я объяснил выше. Далее, вы просто придется применить более высокий z-index (вместе с position: relative) к сердцу, чем к <div>. И вам нужно будет применить некоторые отрицательные margin-top до <div> пока он не перекрывается.

просто идея, может быть, она вас куда-то приведет.

-1