Indented line

Question

I would like to know how this indented heart is realized around it. How to make curves like that? Is this possible with CSS, HTML?

I know how to implement a heart with CSS or even an image, but the curved border defies clarity.

border-radius does not appear to be a solution in this case.

Answer 1

Here is an idea on how you can achieve this layout with built-in svg.

In SVG:

• The first way is the indented line. Indentation is created using the arc command
• The second element of the path is the contour of the heart. He uses a Bezier curve command for the upper part of the heart.

 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> 

For more information on path commands in SVG, see MDN

Answer 2

You can use a pseudo-element:

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

Answer 3

Thus, the best solution for your problem would be to use an SVG form like this or a custom font, since you can change the color and they will scale well for the retina, etc.

CSS3 is generally great for creating basic shapes, however, when it comes to the outlines it drops, it crashes. This is because they usually rely on creating multiple shapes using pre and post selectors. This usually works, but if you want to apply a border, it will cause matching problems with the form.

The only real css solution would be to create a second heart shape, a little smaller like a mask. But this is a markup divorce, so SVG is your best bet.

A quick and dirty example above and an overlapping heart is here 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> 

Answer 4

The simplest, safest and cross-browser solution is to use an image.

Other ways: canvas, border-radius, transform or SVG.

Answer 5

If you really want to do this with css, you can try some image-to-css web services (e.g. http://image2css.alexdoesit.com/ - only the first will appear on Google)

Although the easiest and cleanest way is to do this with a transparent image.

Regarding the implementation of the arc in CSS3, this answer may help: How to create arc forms using CSS3?

Answer 6

CSS = border-radius + overflow:hidden;

• Put the circle as a pseudo-element in a block with overflow:hidden; . So, we get an arc.

• Take the heart from the Awesome font . To set an icon using CSS, create another block with a pseudo-element. If the heart did not protrude beyond the lower boundary of the arc, then it would not be a threat of overflow:hidden; , and we would set both pseudo-elements in one block.

• Place the assembled block on top of the image with the bottom orange frame. Set the negative bottom property to reduce the block to the depth of the border.

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

Answer 7

You can get round shapes using CSS using the border-radius property:

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

EDIT

Sorry, answered this question prematurely. In case you do not want to allow this with an image, I could think of a workaround.

The bottom orange border can be a <div> with a height of 1px or 2px and a width of 100% . The heart element may be another div, stylized, as I explained above. Then you just need to apply a higher z-index (along with position: relative ) to the heart than to the <div> . And you will need to apply a negative margin-top to the <div> until it overlaps.

Just an idea, maybe it got somewhere.