斜角，背景不圆答案

【问题标题】：Bevel corners, background not rounded斜角，背景不圆
【发布时间】：2018-01-16 21:11:20
【问题描述】：

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

如何让它四舍五入？

.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>

【问题讨论】：

我不认为这是一个错误。这是预期的行为。您正在为 div 设置背景，然后为其设置边框半径。这就是背景被剪切的原因。

标签： html css border linear-gradients

【解决方案1】：

由于您使用多个背景，您可以使用radial-gradiant 添加更多背景来创建角（我删除了供应商前缀以简化代码）

.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>

顺便说一句，您可以使用伪元素实现相同的布局，而无需多个背景。它可以更容易处理：

.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>

【讨论】：