Question

有人可以帮帮我吗？我需要使折角变为透明而不是纯色。您可以看到下面的图片供您参考。

我尝试过这些代码：

＆＃13;

.back-ground
{
    background-image: url('http://pencil.my/assets/img/dashboard/bg.png');
    background-repeat: repeat;
    overflow-x: hidden;
}
.note {
    position: relative;
    width: 30px;
    padding: 1em 1.5em;
    margin: 2em auto;
    color: #fff;
    background: #97C02F;
    overflow: hidden;
    border-radius: 4px;
}

.note:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #658E15 #658E15;
    background: #658E15;
    display: block;
    width: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

＆＃13;

<div class="back-ground">
 <div class="note">
    Sample note
 </div>
</div>

＆＃13;

Answer 1

我找到了几个可以帮助你的例子。特别注意作者使用一些triangle形状来实现最终效果的第二个。

让我知道它是怎么回事。

Answer 2

这个问题我来晚了，但是经过一番搜索和找到一些解决方案之后，这才是我最终在一个站点中使用的方法。

    body {
      background-color: #234232
    }

    .box {
      width: 50%;
      height: 40%;
      margin: auto;
    }

    .fold-corner-card {
      margin: 2em;
      padding: 2em;
    }

    .fold-corner-card {
      background:
        -webkit-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -webkit-linear-gradient(45deg, #FFF, #FFF),
        -webkit-linear-gradient(135deg, #FFF, #FFF),
        -webkit-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -moz-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -moz-linear-gradient(45deg, #FFF, #FFF),
        -moz-linear-gradient(135deg, #FFF, #FFF),
        -moz-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        -o-linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        -o-linear-gradient(45deg, #FFF, #FFF),
        -o-linear-gradient(135deg, #FFF, #FFF),
        -o-linear-gradient(225deg, transparent 25px, #FFF 10px);
      background:
        linear-gradient(225deg, transparent 50%, #C9CCD4 50%),
        linear-gradient(45deg, #FFF, #FFF),
        linear-gradient(135deg, #FFF, #FFF),
        linear-gradient(225deg, transparent 25px, #FFF 10px);
    }

    .fold-corner-card {
      -webkit-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      -moz-background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-size: 35px 35px, 0 0, 0 0, 100% 100%;
      background-position: 100% 0, 0 0, 100% 100%, 100% 0;
      background-repeat: no-repeat;
    }

<div class="box">
  <div class="fold-corner-card" style="position: relative;">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nisi dolor, at venenatis nisl viverra sed. Donec arcu felis, fermentum nec sapien vitae, gravida fringilla sapien. Nunc bibendum semper tristique. Curabitur non tempus augue. Vestibulum ut sapien lacus. Sed laoreet molestie est dignissim venenatis.</p>
  </div>
</div>

Answer 3

类似的事情可能起作用。基本上，只需使用::before技巧创建一个border-color三角形，使用transform旋转它，然后将其与::after元素一起放置在页面顶部：< / p>

body {
  padding: 2em;
}

.paper {
  height: 100%;
  min-height: 400px;
  background: #fff;
  position: relative;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  display: block;
}

.paper::before {
  top: -59px;
  border: 30px white solid;
  border-top-color: transparent;
  border-left-color: transparent;
  right: 0;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
  transform: rotate(88deg);
  z-index: 2;
  border-radius: 0% 0% 10%;
}

.paper::after {
  background: white;
  position: absolute;
  height: 57px;
  width: calc(100% - 60px);
  top: -57px;
}

.paper .content {
  padding: 0 2.5em;
  position: relative;
  top: -1em;
  z-index: 1;
  margin-top: 50px;
}


/*This is for the diagonal strip pattern on the background only */

body {
  background-color: gray;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
}

<div class="paper">
  <div class="content">
    This is the content of the paper
  </div>
</div>

如何用透明背景制作css折角效果？

3 个答案: