具有透明背景的纯css折叠效果

时间：2016-10-25 06:02:19

标签： html css

请看图片。如何制作这种折叠效果。我非常需要透明度。

enter image description here

我试过这个。但这在Firefox和IE中没有浏览器支持。此解决方案仅适用于Chrome。

.fold-right{
    position: relative;
}
.fold-right:before{
    content: "";
    position: absolute;
    top: -50px;
    right: 0;
    border: 25px solid #ccc;
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 100%, 0 100%, 0 0);
}
.fold-right:after{
    content: "";
    position: absolute;
    top: -49px;
    left: -49px;
    background: #fff;
    width: 100%;
    height: 49px;
    -webkit-clip-path: polygon(49px 0, 100% 0, 100% 100%, 49px 100%);
    clip-path: polygon(49px 0, 100% 0, 100% 100%, 49px 100%);
}

5 个答案:

答案 0 :(得分：1)

试试这个代码段。我希望，这个片段可以帮助你。

enter image description here

＆＃13;
＆＃13; 
 <tr> <td class="FormCaption" style="WIDTH: 68px">Image</td> <td class="FormTableContainer"><asp:FileUpload CssClass="FormButtons" ID="questionImages" runat="server" Width="400px" /><asp:Label runat="server" ID="lblFilename" ></asp:Label></td> </tr>
＆＃13; 
body{
background: #58A45E;
}
.fold-right{
position: relative;
width: 200px;
height: 200px;
background: #f9f9f9;
margin-top: 100px;
box-sizing: border-box;
padding: 10px;
display: inline-block;
}
.fold-right:before{
content: "";
position: absolute;
top: -50px;
right: 0;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ccc;
}
.fold-right:after{
content: "";
position: absolute;
top: -50px;
left: 0px;
background: #f9f9f9;
width: calc(100% - 50px);
height: 50px;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我使用了单独的div来创建折叠核心效果与实际内容区域。然后，我使用了样式边框来创建可以在所有浏览器中使用的三角形。

＆＃13;
＆＃13; 
.folded-wrapper {
  position: relative;
}
.folded-top {
  height: 20px;
  position: absolute;
  left: 0;
  right: 20px;
  background: red;
}
.folded-top:after {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  right: -20px;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: transparent transparent transparent #007bff;
}
.folded-content {
  width: 100%;
  background: red;
  height: 200px;
  position: relative;
  top: 20px;
}
＆＃13; 
<div class="folded-wrapper">
  <div class="folded-top"></div>
  <div class="folded-content"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

http://codepen.io/partypete25/pen/BLbWRp

答案 2 :(得分：0)

下面的

是codepen代码段的编辑版本。

html,
body {
  padding: 0;
  margin: 0;
  font: 1em/1.4 Cambria, Georgia, sans-serif;
  color: #333;
  background: #ccc;
}
header,
hgroup {
  display: block;
}
a:link,
a:visited {
  border-bottom: 1px solid #c55500;
  color: #c55500;
  text-decoration: none;
}
a:visited {
  border-bottom: 1px solid #730800;
  color: #730800;
}
a:hover,
a:focus,
a:active {
  border: 0;
  color: #fff;
  background: #c55500;
}
a:visited:hover,
a:visited:focus,
a:visited:active {
  color: #fff;
  background: #730800;
}
.container {
  width: 540px;
  padding: 0 0 10px;
  margin: 0 auto 30px;
}
.header {
  border-bottom: 1px solid #ddd;
}
.footer {
  padding: 10px 0 30px;
  border-top: 1px solid #ddd;
  margin-bottom: 0;
}
h1 {
  margin: 1em 0 0;
  font-size: 2.5em;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
}
h2 {
  margin: 0.5em 0 1.5em;
  font-size: 1.25em;
  font-weight: normal;
  font-style: italic;
  text-align: center;
}
p {
  margin: 1em 0;
  line-height: 1.4em;
}
pre {
  margin: 1.4em 0;
  font-size: 12px;
  line-height: 1.4em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.follow {
  clear: both;
  margin-top: 2em;
  font-size: 1.125em;
}
.follow span {
  font-weight: bold;
}
/* == FOLDED CORNERS */

.note {
  position: relative;
  width: 480px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: #97C02F;
  overflow: hidden;
}
.note:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  /* This trick side-steps a webkit bug */
  border-style: solid;
  border-color: #ccc #ccc #658E15 #658E15;
  /* A bit more verbose to work with .rounded too */
  background: #658E15;
  /* For when also applying a border-radius */
  display: block;
  width: 0;
  /* Only for Firefox 3.0 damage limitation */
  /* Optional: shadow */
  -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);
}
.note.red {
  background: #C93213;
}
.note.red:before {
  border-color: #ccc #ccc #97010A #97010A;
  background: #97010A;
}
.note.blue {
  background: #53A3B4;
}
.note.blue:before {
  border-color: #ccc #ccc transparent transparent;
  background: transparent;
}
.note.taupe {
  background: #999868;
}
.note.taupe:before {
  border-color: #ccc #ccc #BDBB8B #BDBB8B;
  background: #BDBB8B;
}
/* ROUNDED CORNERS VERSION
           * All modern browsers can produce this effect with a single pseudo-element.
           * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
           * As far as I can tell, this is the only cross-browser method for the moment.
           * Can't use this method for the simple effect because Opera 11 will only show backgrounds
           * through transparent borders if there is a border-radius applied.
           */

.note.rounded {
  -webkit-border-radius: 5px 0 5px 5px;
  -moz-border-radius: 5px 0 5px 5px;
  border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
  border-width: 8px;
  /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
  border-color: #ccc #ccc transparent transparent;
  /* Avoids the 1px 'step' in webkit. Background colour shows through */
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}
.note p {
  margin: 0;
}
.note p + p {
  margin: 1.5em 0 0;
}
<div class="container header">
  <header>
    <hgroup>
      <h1>Pure CSS folded-corner effect</h1>
    </hgroup>
    <p><em>Known support</em>: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.</p>
  </header>
</div>

<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<div class="note red rounded">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<div class="note blue">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<div class="note taupe">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

<div class="container footer">
  <p>Pure CSS folded-corner effect.</p>

</div>

答案 3 :(得分：0)

最简单的解决方案是使用CSS。添加类似...

HTML：

<div class="post-it-note">
   <p>This folded corner works on any colored background!</p>
</div>

CSS：

.post-it-note {
  padding:2em;
  width:150px;
  font:normal 20px Arial;
  background: #c61ce0;
  position: relative;
  min-height: 10em;
  margin-top: 70px;
  color: #FFF;
 }
.post-it-note::before ,
.post-it-note::after{
 content: "";
 position: absolute;
 top: -2em;
}

.post-it-note::before {
 right: 0;
 border-width: 0 2em 2em 0;
 border-style: solid;
 border-color: #a51aba transparent;
}
.post-it-note::after {
 left: 0;
 right: 2em;
 border-width: 1em;
 border-style: solid;
 border-color: #c61ce0;
}

Working Example

答案 4 :(得分：-1)

检查一下 - 带边框的纯css：Css Triangle

而不是+------------+-------------+----------------+----------+-----------+ | Invoice_Id | Customer_id | Transaction_id | Sequence | Carryover | +------------+-------------+----------------+----------+-----------+ | 253442 | 23334 | | 1 | 0 | | 253443 | 23334 | | 2 | 0 | | 253444 | 23334 | | 3 | 0 | | 253445 | 23334 | | 4 | 0 | | 1050646 | 23334 | | 5 | 0 | | 8457065 | 23334 | | 6 | 0 | | 9052920 | 23334 | | 7 | 0 | | 9333044 | 23334 | | 8 | 0 | | 9616743 | 23334 | | 9 | 0 | | 9894491 | 23334 | | 10 | 0 | | 10186697 | 23334 | | 11 | 0 | | 10490938 | 23334 | | 12 | 0 | | 10803986 | 23334 | 69709477 | 13 | 1 | | 11132317 | 23334 | 72103163 | 14 | 2 | | 11444923 | 23334 | | 15 | 0 | +------------+-------------+----------------+----------+-----------+ 使用+------------+-------------+-------------------+----------+-----------+ | Invoice_Id | Customer_id | Transaction_Count | Sequence | Carryover | +------------+-------------+-------------------+----------+-----------+ | 253442 | 23334 | 0 | 1 | 0 | | 253443 | 23334 | 0 | 2 | 0 | | 253444 | 23334 | 1 | 3 | 1 | | 253445 | 23334 | 1 | 4 | 2 | | 1050646 | 23334 | 0 | 5 | 0 | | 8457065 | 23334 | 0 | 6 | 0 | | 9052920 | 23334 | 2 | 7 | 2 | | 9333044 | 23334 | 1 | 8 | 3 | | 9616743 | 23334 | 0 | 9 | 0 | | 9894491 | 23334 | 0 | 10 | 0 | | 10186697 | 23334 | 0 | 11 | 0 | | 10490938 | 23334 | 0 | 12 | 0 | | 10803986 | 23334 | 1 | 13 | 1 | | 11132317 | 23334 | 1 | 14 | 2 | | 11444923 | 23334 | 0 | 15 | 0 | +------------+-------------+-------------------+----------+-----------+

相关问题
最新问题