CSS одна сторона вырезать круг изображение с границей

Как я могу сделать следующие формы с цветной рамкой:CSS одна сторона вырезать круг изображение с границей

round image with shaped edge

Моя первая попытка была чисто CSS, но приложенный код делает более яйцевидную форму, чем круг:

img { 
 
    border: 2px #ff00ff solid; 
 
    border-top-left-radius: 60% 50%; 
 
    border-bottom-left-radius: 60% 50%; 
 
    border-top-right-radius: 50% 20%; 
 
    border-bottom-right-radius:50% 20%; 
 
}

<img src="https://d1wn0q81ehzw6k.cloudfront.net/additional/thul/media/4e34feee0acdc38a?w=400&h=400" style="width:100%">

Вторая попытка, работа с SVG не поддерживается в Opera и IE, и я понятия не имею, как сделать границы. «Вырез» не работает каждый раз.

img { 
 
    clip-path: url(#myClip); 
 
}

<svg width="120" height="120" 
 
    viewBox="0 0 120 120" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 

 
    <defs> 
 
     <clipPath id="myClip"> 
 
      <circle cx="260" cy="256" r="256" style="fill:none;stroke:#00df0b;stroke-width:6"/> 
 

 
     </clipPath> 
 
    </defs> 
 
</svg> 
 
<img src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" style="width:100%">

источник

2016-08-19 MatzunaTata

[Формы CSS] (https: // css- tricks.com/examples/ShapesOfCSS/) показывает некоторые удивительные формы, которые вы можете сделать с помощью чистого CSS, например [facebook icon] (https://css-tricks.com/examples/ShapesOfCSS/#facebook-icon) (и подтвердил @ jbutler483 ответ для использования этой техники) –

Возможный дубликат [Как нарисовать неполный круг с CSS и как рисовать?] (http://stackoverflow.com/questions/28673567/how-do-draw-an-incomplete-circle-with-css-and-in-it-how-to -put-a-picture) –

Самым простым решением является, вероятно, просто сделать SVG.

<svg width="400px" height="400px" viewBox="0 0 1 1" 
 
    overflow="visible"> 
 
    <defs> 
 
    <mask id="myMask" x="0" y="0" width="1" height="1" 
 
      maskContentUnits="objectBoundingBox" fill="white"> 
 
     <path id="myPath" d="M 0.8 0.9 L 0.8 0.1 A 0.5 0.5 0 1 0 0.8 0.9 Z"/> 
 
    </mask> 
 
    </defs> 
 
    <image xlink:href="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" 
 
     x="0" y="0" width="1" height="1" mask="url(#myMask)"/> 
 
    <use xlink:href="#myPath" fill="none" stroke="#f0f" stroke-width="0.01"/> 
 
</svg>

источник

2016-08-19 19:28:35

Отлично! но ... Нет поддержки с Opera и IE к несчастью. Я дам дальнейшую обратную связь завтра, когда я попробую ваше предложение :) ОБНОВЛЕНИЕ: Он отлично работает, огромное спасибо! – MatzunaTata

@MatzunaTata Opera и IE поддерживают это, если вам не нужна действительно старая, устаревшая и опасная для использования версия IE. –

-1

Проверить это один теперь, может быть, это то, что вы хотите. jsfiddle Пример 2: jsfiddle вы можете перемещаться по ширине и высоте в архив, что вы хотите точно

div { 
    width: 33%!important; 
    height: 75vh!important; 
    border: 2px #ff00ff solid; 
    border-top-left-radius: 50% 50%; 
    border-bottom-left-radius: 50% 50%; 
    border-top-right-radius: 40% 20%; 
    border-bottom-right-radius:40% 20%; 
    overflow:hidden; 
}

источник

2016-08-19 15:10:07

Может, парень, который проголосовал, объяснил мне почему? –

Это лучшее, что вы можете получить с помощью css. –

Да, но это явно лучше, чем его попытка с помощью css. В любом случае, он может создать это с помощью svg, но ему нужно много времени, чтобы получить то, что он хочет. –

Вы можете использовать псевдо-элемент, чтобы создать что-то вроде этого:

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    transition: all 0.4s; 
 
} 
 
div:hover { 
 
    height: 500px; 
 
    width: 500px; 
 
} 
 
div:before { 
 
    content: ""; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 15%; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url(http://lorempixel.com/300/300); 
 
    background-size: 100% 100%; 
 
    border-radius: 50%; 
 
    border: 10px solid tomato; 
 
} 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 15%; 
 
    height: 70%; 
 
    background: tomato; 
 
    width: 10px; 
 
}

<div></div>

источник

2016-08-19 22:58:35 jbutler483

CSS одна сторона вырезать круг изображение с границей

ответ

Смежные вопросы