Create Box With Diagonal Edge

Question

I need to create a box with a diagonal edge. Below is the picture and here is a link to it.

How would I do this using only CSS and HTML?

I'm aware its possible to create triangles in CSS, so maybe I create one div with the rounded corners for the 'yellow' portion of the box. Not sure how to do the inside grey part though.

I'd like to avoid the multiple images solution because this will be on mobile so that it loads as quickly as possible.

I'm looking into a solution with 3 divs inside and one being a triangle, I found a triangle maker here, then maybe relative position on the yellow div, and absolute position the content after that?

Answer 1

There is a way to achieve this shape without having to use extra elements also. I can understand the reluctance in using multiple images but this approach only makes use of multiple backgrounds and should not have any impact on page load time.

In this approach, we create a linear-gradient background of a smaller size and position it at the right top of the container to achieve the triangle effect.

This approach can also be used with media queries without much issues.

.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

Update:

Media query to 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;
    }
}

Result:

Answer 3

Why don't you just create an image and use that as the background. You could make the image look exactly like the gray and yellow above and then just add it to your "box".

Answer 4

here is the link to a js fiddle I have mocked up - this works pretty well, though I didn't do the entire style 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;
}

Edit: I'll get back to you on the rounded corner of the triangle; I didn't notice that initially