Border Style

csosa · November 2, 2015, 9:34pm

Hello I have a border style on my boxes that
have a page effect.price-boxes:before , however it is showing
a white background on the border color.
I want to take to off the white color but
Im not sure what to declare in the CSS.
Website

  border-color:#fff #fff #77B1F7 #1974F9;

ralphm · November 2, 2015, 9:54pm

You’ll have to rethink this, because as soon as you make that top corner transparent, the background of the main box will show through.

csosa · November 2, 2015, 10:04pm

ah I see, besides making it transparent is it possible
to completely take out that part and just have the fold?

lauren_olsen17 · November 2, 2015, 10:04pm

I agree with @ralphm. For example take a look a these shapes, this may give you a different approach, codepen - flat shapes.

Otherwise another option would be for you to make these shapes in AI and add the text and make them SVGs.

ralphm · November 2, 2015, 10:08pm

You could try some of the examples @lauren_olsen17 linked to, but by far the easiest solution here is to create a semi-transparent PNG image in Photoshop that includes the corner fold and use that as a background image on those boxes.

csosa · November 2, 2015, 10:09pm

cool thanks

ralphm · November 2, 2015, 10:16pm

No worries. BTW, I would make it bigger than the actual boxes, just in case they get resized on someone’s browser. Position the image top right. Much more bulletproof than trying to mess with CSS3 etc.

ronpat · November 3, 2015, 12:42am

@Ralph is right about the .png being more bullet-proof. Simpler is better.

FYI, for the future, the transparent folded corner is done by applying the background image in the corner box, then putting the triangle inside that box. Both image calls (the page background and the corner boxes) are {background-attachment:fixed}.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>folded corner</title>
<!--
http://www.sitepoint.com/community/t/border-style/206321
csosa
Nov 2, 2015 4:34 PM
-->
    <style type="text/css">

html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow-y:scroll;
}
*,*:before,*:after {
    box-sizing:inherit;
}

body {
    background:#bdf url("images/mountain.jpg") no-repeat 0 0 fixed;
/*    background-size:contain; /* if used, must use in two places */
    padding:0;
    margin:0;
}
.outer {
    text-align:center;
}
.pricebox {
    display:inline-block;
    width:250px;
    height:300px;
    position:relative;
    background-color:rgba(255,255,255,.35);
    overflow:hidden;  /* cuts off the right box shadow */
    margin:1em;
/*    outline:1px solid yellow; /* TEST Outline. TO BE DELETED. */
}
.pricebox::before,
.pricebox::after {
    content:"";
    position:absolute;
    right:0;
}
.pricebox::before {
    width:160px;
    height:160px;
    background:#bdf url("images/mountain.jpg") no-repeat 0 0 fixed;
/*    background-size:contain; /* if used, must use in two places */
/*    outline:1px dotted yellow; /* TEST Outline. TO BE DELETED. */
}
.pricebox::after {
    width:0;
    height:0;
    border-bottom:160px solid rgba(255,255,255,.65);
    border-right:160px dotted transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), -1px 1px 1px rgba(0, 0, 0, 0.2);
}
    </style>
</head>
<body>

<div class="outer">
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
</div>

</body>
</html>

In this demo, I exaggerated the folded corner.
Put a large image in the background (same image, two places in the CSS) to get a better idea of how it looks and works.

EDIT: 22:08 EST
I changed the code for the folded corner triangle so the fold appears smooth rather than having the little jaggies.

csosa · November 3, 2015, 12:48am

im sorry, make what bigger?

csosa · November 3, 2015, 12:52am

ok ill try this out

PVgr · November 3, 2015, 8:17am

The “cutout” corner can also be done with gradients:

.price-boxes {
  background: rgba(63, 135, 252, 0.8);
  background: -webkit-linear-gradient(225deg, transparent 15px, rgba(63, 135, 252, 0.8) 0) no-repeat;
  background: linear-gradient(-135deg, transparent 15px, rgba(63, 135, 252, 0.8) 0) no-repeat;
}

ralphm · November 3, 2015, 9:51am

Ah yes, very nice. I’ve studied how to do gradients before, but then I don’t use them for a while and have to learn them all over again. It’s hard to work out how that code works by just looking. Sigh! Nice work, anyhow.

ronpat · November 3, 2015, 10:15am

Hope you don’t mind, @PVgr. I plugged your gradient into my demo for a side-by-side comparison. Brilliant improvement. Gradients Rock!

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>folded transparent corner2</title>
<!--
http://www.sitepoint.com/community/t/border-style/206321
csosa
Nov 2, 2015 4:34 PM

Gradient by PVgr.
-->
    <style type="text/css">

html {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    overflow-y:scroll;
}
*,*:before,*:after {
    box-sizing:inherit;
}

body {
    background:#bdf url("images/mountain.jpg") no-repeat 0 0 fixed;
/*    background-size:contain; /* */
    padding:0;
    margin:0;
}
.outer {
    text-align:center;
}
.pricebox {
    display:inline-block;
    width:250px;
    height:300px;
    position:relative;
    overflow:hidden;  /* cuts off the right box shadow */
    background-color:rgba(255,255,255,.35);
    background:-webkit-linear-gradient(225deg, transparent 110px, rgba(255,255,255,.35) 0) no-repeat;
    background:linear-gradient(-135deg, transparent 110px, rgba(255,255,255,.35) 0) no-repeat;
    margin:1em;
/*    outline:1px solid yellow; /* TEST Outline. TO BE DELETED. */
}
.pricebox::after {
    content:"";
    position:absolute;
    right:0;
    width:0;
    height:0;
    border-bottom:155px solid rgba(255,255,255,.5);
    border-right:155px dotted transparent;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.2), -1px 1px 1px rgba(0, 0, 0, 0.2);
}
    </style>
</head>
<body>

<div class="outer">
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
    <div class="pricebox"></div>
</div>

</body>
</html>

PVgr · November 3, 2015, 2:54pm

I’d love to brag about the awesomeness of this technique, but it is Lea Verou that should take the credit, and here is another example.

csosa · November 3, 2015, 4:53pm

This is a great technique.

I have text in mine however when I put the text in
it throws the fold down. PEN

I want it to look like this

PaulOB · November 3, 2015, 6:02pm

You need to add top:0 to .pricebox::after otherwise it just assumes an auto position.

You can change the size of the fold by messing with the border size and changing the px measurement in the gradient.

system · February 3, 2016, 1:02am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.