Question

我想知道是否有人可以指出我正确的方向/或将下面的图像作为标题放置的最佳方法。我不是一个网络程序员，所以我想要这个。

https://www.dropbox.com/s/x8385g42806yisv/man-with-flag.png?dl=0

不确定，如果图像应该是两个切片，要制作一个矩形，另一个是带曲线的那个

或使图像成矩形，并应用CSS

图像下面会有三个部分，因此理想情况下，下面的部分应该无缝过渡。

Answer 1

与此http://jsfiddle.net/lotusgodkk/7fjSc/1006/相似？

<强> CSS：

.a {
    position: relative;
    height: 70px;
    width: 600px;
    background: #182F5B;
}
.a:before, .a:after {
    content:"";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
}
.a:before {
    width: 340px;
    height: 80px;
    background-color: #FFFFFF;
    right: -5px;
    top: 40px;
}
.a:after {
    width: 300px;
    height: 70px;
    background-color: #182F5B;
    left: 0;
    top: 27px;
}

<强> HTML ：

<div class="a" /><div/>

css html曲线标题

1 个答案: