斜角，背景不圆角

Question

I have a figure with bevel corners, but the background is not rounded:

How to have it rounded?

 .test-block { height: 480px; padding: 4px; color: #ffffff; background-color: transparent; background-image: -webkit-linear-gradient(top, #ffdc00, #ffdc00), -webkit-linear-gradient(225deg, #ffdc00, #ffdc00), -webkit-linear-gradient(bottom, #ffdc00, #ffdc00), -webkit-linear-gradient(left, #ffdc00, #ffdc00), -webkit-linear-gradient(315deg, transparent 9px, #ffdc00 10px, #ffdc00 12px, red 12px); background-image: linear-gradient(180deg, #1698d9, #1698d9), linear-gradient(225deg, #1698d9, #1698d9), linear-gradient(0deg, #1698d9, #1698d9), linear-gradient(90deg, #1698d9, #1698d9), linear-gradient(135deg, transparent 28px, #1698d9 28px, #1698d9 32px, #ffffff 10px); background-position: top right, top right, bottom left, bottom left, top left; background-size: -webkit-calc(100% - 15px) 2px, 2px 100%, 100% 2px, 2px -webkit-calc(100% - 15px), 100% 100%; background-size: calc(100% - 40px) 4px, 4px 100%, 100% 4px, 4px calc(100% - 40px), 100% 100%; background-repeat: no-repeat; border-radius: 10px; width: 320px; } .test-block__div { background-image: url(http://css-snippets.com/blogfile/wp-content/uploads/2011/03/square.jpg); background-repeat: no-repeat; background-position: -24px 208px; height: 100%; } 

 <div class="test-block"> <div class="test-block__div"></div> </div> 

Answer 1

Since you are using multiple background you can add more using radial-gradiant to create the corner (I removed the vendor prefixes to simplify the code)

 .test-block { height: 480px; padding: 4px; color: #ffffff; background-color: transparent; background-image: radial-gradient(circle at top left, transparent 40%, #1698d9 0%), radial-gradient(circle at bottom left, transparent 40%, #1698d9 0%), radial-gradient(circle at top right, transparent 40%, #1698d9 0%), linear-gradient(180deg, #1698d9, #1698d9), linear-gradient(225deg, #1698d9, #1698d9), linear-gradient(0deg, #1698d9, #1698d9), linear-gradient(90deg, #1698d9, #1698d9), linear-gradient(135deg, transparent 28px, #1698d9 28px, #1698d9 32px, transparent 10px); background-position: bottom right, top right, bottom left, top right, top right, bottom left, bottom left, top left; background-size: 10px 10px, 10px 10px, 10px 10px, calc(100% - 40px) 4px, 4px 100%, 100% 4px, 4px calc(100% - 40px), 100% 100%; background-repeat: no-repeat; border-radius: 10px; width: 320px; } body { background-image:linear-gradient(30deg, pink, yellow); } 

 <div class="test-block"> </div> 

By the way you can achieve the same layout using pseudo-element and without multiples background. It can be easier to handle:

 .test-block { height: 440px; padding: 4px; margin-top: 60px; color: #ffffff; border-right: 4px solid #1698d9; border-left: 4px solid #1698d9; border-bottom: 4px solid #1698d9; border-radius: 0 0 10px 10px; width: 320px; position: relative; } .test-block:before { content: ""; position: absolute; left: -4px; width: 50%; height: 40px; top: -44px; border-left: 4px solid #1698d9; border-top: 4px solid #1698d9; transform: skewX(-40deg); transform-origin: bottom left; } .test-block:after { content: ""; position: absolute; right: -4px; height: 40px; width: 50%; top: -44px; border-right: 4px solid #1698d9; border-top: 4px solid #1698d9; border-radius: 0 10px 0 0; } body { background-image: linear-gradient(30deg, pink, yellow); } 

 <div class="test-block"> </div>