Question

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

enter image description here

如何仅使用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;
    }
}

<强>结果：

enter image description here

Answer 3

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

Answer 4

这里是我模仿的js小提琴的链接 - 虽然我没有做整个风格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;
}

编辑：我会在三角形的圆角处回复你;我最初没注意到

创建对角线边框

4 个答案: