斜角，背景不圆角 [英] Bevel corners, background not rounded

问题描述

我有一个带有斜角的图形，但是背景不是圆形的:

I have a figure with bevel corners, but the background is not 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>

推荐答案

由于您使用的是多个背景，因此可以使用 radial-gradiant 创建更多的角落(我删除了供应商前缀以简化代码)

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>

这篇关于斜角，背景不圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！