创建具有对角边的框

Question

我需要创建一个带有对角线边缘的盒子。下面是图片和here is a link to it。

我将如何仅使用 CSS 和 HTML 来做到这一点？

我知道它可以在 CSS 中创建三角形，所以我可能会为盒子的“黄色”部分创建一个带有圆角的 div。不知道怎么做里面的灰色部分。

我想避免使用多张图片解决方案，因为这将在移动设备上进行，以便尽快加载。

我正在寻找一个内部有 3 个 div 和一个三角形的解决方案，我找到了一个三角形制造商 here，然后可能是黄色 div 上的相对位置，然后是绝对位置的内容？

Answer 1

有一种方法可以实现这种形状，而无需使用额外的元素。我可以理解使用多张图片的不情愿，但这种方法只使用了多张背景，不会对页面加载时间产生任何影响。

在这种方法中，我们创建一个较小尺寸的linear-gradient背景并将其定位在容器的right top处，以实现三角形效果。

这种方法也可以用于媒体查询，没有太多问题。

.shape {
  height: 400px;
  width: 50vw;
  background: linear-gradient(225deg, #F3D56A 50%, transparent 50%), #EFEFEF;
  background-size: 75px 75px;
  background-repeat: no-repeat;
  background-position: right top;
  border-radius: 4px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, .5);
  border-top: 5px #F3D56A solid;
}
@media (max-width: 300px) {
  .shape {
    width: 150px;
    background-size: 50px 50px;
  }
}
@media (min-width: 301px) and (max-width: 600px) {
  .shape {
    width: 300px;
    background-size: 50px 50px;
  }
}

<div class="shape"></div>

Answer 2

HTML：

<div id="content">
    <span></span>
    <p class="title">Gold</p>
    <p class="subtitle">Starting at</p>
    <p class="price">$69.99/mo</p>
    <a href="#" class="button">More Info</a>
</div>

CSS

#content {
    font-family: Helvetica, Serif;
    width: 440px;
    height: 460px;
    background: #EFEFEF;
    text-align: center;
    border-radius: 5px;
    -webkit-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
    -moz-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
    box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
    border-top:7px #F3D56A solid;
}
#content span {
    border-style: solid;
    border-width: 0 110px 110px 0;
    border-color: transparent #f3d56a transparent transparent;
    line-height: 0px;
    _border-color: #000000 #f3d56a #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    float: right;
}
.title {
    position: relative;
    left: 50px;
}
.title, .price{
    color:#2C3E50;
    font-size: 45px;
    font-weight: 700;
    text-align: center;
}
.subtitle {
    color: #7A828B;
    font-size: 30px;
    font-weight: 300;
}
a.button {
    text-decoration: none;
    color:#FFF;
    background: #F3D56A;
    padding:20px 30px;
    border-radius: 5px;
}

WORKING DEMO

更新：

媒体查询到 320x480：

@media only screen and (min-width: 320px) and (max-width: 480px) {
    #content {
        width: calc(100% - 5px);
        height: 400px;
    }
    #content span {
        border-width: 0 90px 90px 0;
    }
}

结果：

Answer 3

您为什么不直接创建一个图像并将其用作背景。您可以使图像看起来与上面的灰色和黄色完全一样，然后将其添加到您的“框”中。

Answer 4

这里是我模拟的 js fiddle 的链接 - 虽然我没有完成整个风格 https://jsfiddle.net/6pcrneat/

.container { 
    width:200px; 
    height:250px; 
    background:#ffffff;
    border:1px solid #000;
    position:relative;
}
.shape {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    position: absolute;
    right: -45px;
    top: -10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border-width: 0px 70px 70px 70px;
    border-color: transparent transparent rgb(243, 213, 106) transparent;  
    moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}
.text {
  margin-top: 100px;
  text-align: center;
}

编辑：我会在三角形的圆角处回复您；我一开始没注意到