主页 / 问题 / 770441
Accepted
Alexey Giryayev
Asked:2020-01-14 05:36:33 +0000 UTC2020-01-14 05:36:33 +0000 UTC

带有部分图像的三角形

  • 772

用部分图像实现这种三角形的最佳方法是什么。

在此处输入图像描述

最初尝试用背景 .png 图像覆盖。但是，这种解决方案并不是最实用的。

在此处输入图像描述

这里可以有任何简单的选择吗？没有必要举例说明，对这个问题的简要描述或想法就足够了。

css

3 个回答

  1. 此选项可能适合您。

    这里有两个伪元素before, after。

    当然，您可以删除hover效果。这取决于你的口味。

    .box {
  margin: 0 auto;
  max-width: 600px;
  background: #fff;
  border: 1px solid #ccc;
}

.content {
  padding: 32px 42px;
  border-radius: 0 0 3px 3px;
}
.content h1 {
  color: #444;
  margin-top: 0;
}

.image {
  width: 100%;
  overflow: hidden;
  padding: 0 0 30%;
  position: relative;
  -webkit-transition: padding 0.5s ease-out;
  transition: padding 0.5s ease-out;
  background-image: url("https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800");
  background-size: cover;
}
.image:hover {
  padding-bottom: 35%;
}
.image::before {
  left: 0;
  bottom: 0;
  content: "";
  width: 32px;
  position: absolute;
  border-bottom: 12px solid #fff;
  border-right: 12px solid transparent;
}
.image::after {
  bottom: 0;
  left: 44px;
  content: "";
  width: 100%;
  position: absolute;
  border-bottom: 12px solid #fff;
  border-left: 12px solid transparent;
}
    <div class="box">
  <div class="image">
  </div>
  <div class="content">
    <h1>What is Lorem Ipsum?</h1>    
  </div>
</div>

    这是另一个例子。实现与前面的示例大致相同。

    *:before,*:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    background-color:#ddd;
}
.outer {
    max-width:960px;
    margin:0 auto;
}
.paneltop {
    height:68px;
    background-color:#f00;
}
.car {
    width:100%;
    height:auto;
    position:relative;
}
.car:after {
    content:"";
    display:block;
    width:0;
    border-top:48px solid #f00;  /* downward pointing red arrow */
    border-right:48px dotted transparent;
    border-left:48px dotted transparent;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
}
.car img {
    display:block;
    width:100%;
    height:auto;
}
.panelbottom {
    height:28px;
    background-color:#ff0;
}
.panelbottom:before,
.panelbottom:after {
    content:"";
    width:50%;
    border-bottom:48px solid #ff0;
    margin-top:-48px;
    position:relative;
}
.panelbottom:before {
    border-right:48px dotted transparent;
    float:left;
}
.panelbottom:after {
    border-left:48px dotted transparent;
    float:right;
}
    <div class="outer">
    <div class="paneltop"></div>
    <div class="car"><img src="https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800" alt="concept car" width="960" height="480"></div>
    <div class="panelbottom"></div>
</div>

    第三个例子。

    这里的真相只是一个带有背景图像的三角形。但它可能对某人有用。

    .kwadrat
{ 
  width: 232px; 
  height: 180px; 
  border-bottom: 1px solid #000; 
  overflow: hidden; 
}
.trojkat
{ 
  position: relative; 
  overflow: hidden; 
  transform: rotate(45deg) skew(10deg,10deg); 
  border-left: 1px solid #000; 
  border-top: 1px solid #000;

  width: 200px;
  height: 200px;
  margin:81px 0 0 16px;
}

.trojkat_bg
{
	position: absolute;
  width: 200%;
  height: 200%;
  top: -67%;
  left: -50%;
  z-index: -1;
  background: url(https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}

.trojkat_bg:hover{ background-size: 90%; }
		
.kwadrat2
{ 
  width: 232px; 
  height: 170px; 
  border-top: 1px solid #000; 
  overflow: hidden; 
  margin-top: 5px; 
}

.trojkat2
{
	position: relative;
  overflow: hidden;
  transform: rotate(45deg) skew(10deg,10deg);
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  width: 200px;
  height: 200px;
  margin:-100px 0 0 16px;
}
.trojkat_bg2
{
	position: absolute;
  width: 240%;
  height: 200%;
  top: 17%;
  left: -50%;
  z-index: -1;
  background: url(https://avatars.mds.yandex.net/get-pdb/33827/ad46348d-6f2a-4c51-9866-d1b119498e8c/s800);
  background-size: 100%;
  background-position: center top;
  transform: skew(-10deg,-10deg) rotate(-45deg) ;
  transition: .3s;
}

.trojkat_bg2:hover{ background-size: 90%; }
    <div class="kwadrat">
  <div class="trojkat">
    <div class="trojkat_bg"></div>
  </div>
</div>

<div class="kwadrat2">
  <div class="trojkat2">
  <div class="trojkat_bg2"></div>	
</div>

    此选项将通用容器的一部分转换为三角形。

    p {
  color: #fff;
  padding: 0 12px;
  width: 280px;
}
.triangle-fluid {
  background: transparent url("http://placekitten.com/g/1200/500") center center;
  background-size: cover;
  overflow: hidden;
}
.triangle-container {
  box-sizing: border-box;
  padding: 5%;
  position: relative;
}
.triangle {
  background: none;
  border: 0 solid transparent;
  height: 0;
  position: absolute;
  top: 0;
  width: 0;
}
.triangle-left {
  border-left-color: #fff;
  border-left-width: 4000px;
  border-top-width: 720px;
  left: 0;
}
.triangle-right {
  border-right-color: #fff;
  border-right-width: 4000px;
  border-top-width: 720px;
  right: 0;
}
    <div class="triangle-fluid">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nihil est repudiandae, facere amet iusto aliquid iste! Inventore, est, consequatur.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis accusantium blanditiis officiis.</p>
  <div class="triangle-container">
    <div class="triangle triangle-left"></div>
    <div class="triangle triangle-right"></div>
  </div>
</div>

    • 6

  2. 也可以选择：

    <div class="wrap">
  <svg id="lbox" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 400">
    <defs>
      <clipPath id="clip">
        <path d="M0 0 H600 V380 H320 L300 400 L280 380 H0z" />
      </clipPath>
    </defs>
    <image xlink:href="https://www.w3schools.com/w3css/img_fjords.jpg"  width="600" height="400" clip-path="url(#clip)"/>
    <path d=""/>
    <text x="50%" y="50%" text-anchor="middle" stroke="#000" stroke-width="1px" font-size="36" dy=".3em">Твой красивый текст</text>
  </svg>
</div>

    PS：从 facebook 执行（悬停到用户个人资料）

    • 2
  3. Best Answer

    因此，满足我需求的最佳解决方案是这样的选项：

    body {
  margin: 0;
  padding: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #f6f6f6;
}

div {
  position: relative;
  width: 140px;
  height: 288px;
  background-position: center;
  background-size: cover;
  margin: 10px;
}

svg {
  margin: 10px;
    -webkit-filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15));  
}


/* Делается накладка целиком на изображение. Минусом является отсутсвие возможности создать тень и невозможность масштабирования, точнее, сложности с масштабированием */

.mask {
  mask: url(https://isstatic.askoverflow.dev/V3TDk.png) no-repeat;
  -webkit-mask: url(https://isstatic.askoverflow.dev/V3TDk.png) no-repeat;
}


/* Тут мы создаем небольшой треугольник перенося фон из основного блока, а затем создаем для него обрезку по краям. Поддержка IE отсутсвует и cover не подходит для реализации, так как фон треугольника нужно четко подставить к основному изображению. */

.pseudo-triangle {
  height: 280px;
  border-radius: 10px;
  background-position: left -7px;
  background-size: auto 287px;
}

.pseudo-triangle:before {
  content: '';
  position: absolute;
  left: 20px;
  top: 100%;
  display: block;
  width: 14px;
  height: 7px;
  background-image: inherit;
  background-position: -27px bottom;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
    <div class="mask" style="background-image: url(https://i.pinimg.com/564x/09/2f/ce/092fcef43b02deb893b57f8319def13b.jpg)">
</div>

<div class="pseudo-triangle" style="background-image: url(https://i.pinimg.com/564x/ee/88/d8/ee88d8e5aace7b37122a61ea88f38880.jpg)"></div>

<svg width="140" height="288">
  <clipPath id="clipping">
    <path d="M130,0H10A10.0294,10.0294,0,0,0,0,10V270a10.0294,10.0294,0,0,0,10,10H20l5.629,5.629a2.0059,2.0059,0,0,0,2.8284,0L34.0864,280H130a10.0294,10.0294,0,0,0,10-10V10A10.0294,10.0294,0,0,0,130,0Z" />
  </clipPath>
  <image 
    style="clip-path: url(#clipping);height:100%;"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="https://i.pinimg.com/564x/09/b1/e2/09b1e2502eb61cc5d3f47faed92cef56.jpg"
    >
  </image>
</svg>

    这是在第一个版本和 SVG 版本中使用的叠加层：

    在此处输入图像描述

    对于第二个和第三个选项，您可以使用创建阴影filter: drop-shadow。出于我个人的目的，我使用了带有伪元素的版本，因为有一个变暗并且根本看不到背景，并且图像本身可以随意缩放。

    在此处输入图像描述

    支持mask- CSS 蒙版

    支持clip-path- CSS 剪辑路径属性

    顶部支持 SVG）

    • 1

相关问题