Блог

Главная - Вопросы по программированию - Как получить эту частично диагональную форму из изображения в CSS

Как получить эту частично диагональную форму из изображения в CSS

#html #twitter-bootstrap #css #css-shapes

#HTML #twitter-bootstrap #css #css-shapes

Вопрос:

Я использую bootstrap 4 и пытаюсь создать эту форму изображения:

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

 <div class="container">
   <div class="row">
       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
           <img src="path/to/image" class="img-fluid" alt="Some text">
       </div>
   </div>
</div>

Как мне это сделать?

Комментарии:

1. Самым простым способом было бы сделать изображение в формате png и просто создать нужную форму в photoshop, если вам нужно использовать CSS, вы можете использовать обрезку или маскировку, но они не поддерживаются широко

2. Я думаю Photoshop , это лучший ответ на ваш вопрос.

Ответ №1:

CSS — код

Этого можно легко достичь , используя только CSS border-radius . Ниже приведен простой пример.

 body {
  background: blue;
}
img {
  border-radius: 100% 20% 0% 0% / 15% 40% 0% 0%;
  overflow: hidden;
} 
 <img src="https://placekitten.com/200/200" />

Используя предоставленный вами HTML-код, так же просто добавить его в

 body {
  background: blue;
}
img {
  border-radius: 100% 20% 0% 0% / 15% 40% 0% 0%;
  overflow: hidden;
} 
 <div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <img src="https://placekitten.com/200/200" class="img-fluid" alt="Some text">
    </div>
  </div>
</div>

SVG / clip-path

Альтернативой является использование пути к клипу SVG, который затем используется на вашем изображении.

Это немного отличается от ответа Персийна, но в том же духе

 body {
  background: red;
}
img {
  -webkit-clip-path: url("#shape_clip");
  clip-path: url("#shape_clip");
  width: 200px;
  height: 200px;
} 
 <svg width="0" height="0">
  <defs>
    <clipPath id="shape_clip" clipPathUnits="objectBoundingBox">
      <path d="M0,1 L1,1 L1,.3 Q1,0 .65,.1 L0,.25z" />
    </clipPath>
  </defs>
</svg>

<img src="https://placekitten.com/200/300" />

Комментарии:

1. Это уже близко, но не совсем то, чего я так пытаюсь достичь. Радиус 20% правильный, но я хочу прямую диагональную линию

2. @JasonHall добавьте альтернативу SVG / clip-path, которая должна соответствовать вашим требованиям

Ответ №2:

SVG

Сложные формы могут быть труднодостижимы в CSS.
Я бы рекомендовал использовать SVG для создания этой фигуры

 <svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <clipPath id="clip">
    <path d="M5,20 
                         C0,20 70,10 70,10 
                         C70,10 85,10 85,30
                         V95
                         H5Z"/>
  </clipPath>
  <image clip-path="url(#clip)" xlink:href="https://placekitten.com/g/300/300" x="0" y="0" height="100%" width="100%"/>
</svg>

Комментарии:

1. Эта форма практически то, что мне нужно, как я могу убедиться, что я использую для этого реальное изображение вместо черного цвета? «Раньше не так много разбирался в svg и путях

2. @JasonHall добавил изображение (котенка) и превратил путь в клип-путь вместо этого 🙂

3. Это именно то, что мне было нужно. Если я помещу SVG в столбец из Bootstrap, возможно ли сделать его адаптивным для всех размеров?

4. SVG по умолчанию адаптируется для всех размеров. Ответ @Stewartside svg на самом деле более отзывчивый, чем мой.

Ответ №3:

Вы могли бы достичь этого эффекта с помощью маскировки изображения SVG. Я не знаю размеров вашей маски, но эта ссылка должна вам помочь:

http://vanseodesign.com/web-design/svg-masking-examples-2/

Ответ №4:

Вы можете использовать что-то вроде приведенного ниже, чтобы получить желаемый эффект, вам нужно будет отредактировать его, чтобы добавить к нему картинку. Но CSS before -теги — ваш друг

ОБНОВЛЕНО

 .clipboard, .shadowboard {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: #d3d0c9;
    background-image: url(http://i1.wp.com/cdn.batman-news.com/wp-content/uploads/2014/06/Batman-News-Default.jpg);
    background-size: cover;
    background-position: center center;
        border-top-right-radius: 65px;
} 
 <div class="clipboard" style="-webkit-clip-path: polygon(0 31%, 100% -4%, 100% 100%, 0% 100%);clip-path: polygon(0 31%, 100% -4%, 100% 100%, 0% 100%);"></div>

Комментарии:

1. Если вы попытаетесь добавить изображение, это полностью разрушит эффект

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

3. Я обновил его, пожалуйста, взгляните на обновленный код

4. @Sphinx почему вы помещаете путь к клипу внутри атрибута стиля? Просто установите ее в css.

Метки: