使用css制做圆弧形背景 | 8月更文挑战

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

问题一

使用background制做制做一个相似下图的圆弧形渐变背景图

思路

须要在当前的基础上制做一个更大的盒子, 以下图红框部分所示 (好比设置width为150%). 而后经过设置盒子的border-bottom-left-radius 和 border-bottom-right-radius来造成圆弧的效果.

设置好radius之后须要把大盒子往左边拽回一部分距离 (好比往左移动25%), 使得视口部分在大盒子的正中央, 以下图所示. 能够经过position来设置背景大盒子的位置.

代码 (流式布局)

<!-- 焦点图部分 -->
        <div class="banner">
            <!-- 利用一个标签的背景制做了大盒子的背景效果 -->
            <div class="banner-bg"></div>
            <!-- 下面是滑动焦点图部分 -->
        </div>
复制代码

.banner {
    position: relative;
    width: 100%;
    height: 187px;
    overflow: hidden;
}

.banner .banner-bg {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 145px;
    background-color: #C82519;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    background-image: linear-gradient(0deg, #f1503b, #c82519 50%);  /* 渐变 */
}
复制代码

问题二

使用图片制做一个以下的弧形背景图

思路

与上面思路相同的一点是: 都须要制做一个大盒子, 而且经过设置盒子的border-bottom-left-radius 和 border-bottom-right-radius来造成圆弧的效果.

不一样点在于: 在下面的代码中, 没有直接设置一个宽度为150%的大盒子, 而是设置一个宽度为100%和盒子, 经过在左右两侧各padding一个25%的值来获得一个大盒子. 对于<a>和<img>标签来讲, 就不须要进行额外的宽度设置了.

有一个值得注意的点是此次的overflow: hidden 直接设置给了父元素<div>, 经过隐藏超出部分而使子元素只能显示圆弧内的部分, 而不是直接在子元素上设置圆弧.

这时候图片距离左边是有必定距离的, 这是由于父元素设置了padding, 这个值为25%. 但这时不能直接将整个父元素表示出的大盒子向左移动25%, 这是由于这个25%是针对宽度100%而言的, 而加上左右两边的padding后整个大盒子的宽度为150%, 所以须要向左移动的距离为150%的25%, 也就是25%/150% = 1/6 = 16.666%. 因此正确的方法应该是向左移动16.666%, 而不是25%

代码

<!-- 焦点图部分 -->
    <div class="focus">
        <a href="#">
            <img src="images/banner.jpg" alt="">
        </a>
    </div>
复制代码

/* 焦点图样式 */
.focus {
  width: 100%;
  padding: 0 25%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  transform: translateX(-16.666%);
  overflow: hidden;
}
.focus a {
  display: block;
}
.focus a img {
  display: block;
  width: 100%;
}
复制代码