用对角线创建盒子

Question

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

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

我知道可以在 CSS 中创建三角形，所以我可能会创建一个 div，其中 'yellow' 部分是方框的圆角。不确定如何处理内部灰色部分。

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

我正在寻找一个解决方案，里面有 3 个 div，其中一个是三角形，我找到了一个三角形标记 here，然后可能是黄色 div 上的相对位置, 以及之后的内容的绝对定位?

Answer 1

你为什么不创建一个图像并将其用作背景。您可以使图像看起来完全像上面的灰色和黄色，然后将其添加到您的 "box".

Answer 2

这里是 link 到 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;
}

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

Answer 3

HTML:

<div id="content">
    <span></span>
    <p class="title">Gold</p>
    <p class="subtitle">Starting at</p>
    <p class="price">.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 4

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

在这种方法中，我们创建一个较小尺寸的 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>

用对角线创建盒子

Create Box With Diagonal Edge

html

css

css-shapes