html - 我怎样才能标记它？

标签 html css markup

<分区>

我有一张照片，看起来是这样的: enter image description here

我想用 HTML 和 CSS 标记它。

我希望曲线部分始终位于屏幕中心并具有内容。我希望平面部分根据用户屏幕的两侧宽度进行拉伸(stretch)。

我该怎么做？谁能给我提供例子吗？

感谢您的关注。

最佳答案

你可以试试这个 Demo

html

#test{
    width: 50px;
    height: 600px;
    background: green;
    position: absolute;
    top:0;
    left:0;
    right:0;
    margin: auto;
    display: inline-block;
    -webkit-transform: translate(300px) rotate(90deg) ;
    -webkit-transform-origin: left top;
}

#test:after{
    background: white;
    height: 600px;
    width: 100px;
    border-radius: 100px 0 0 100px / 600px 0 0  600px;
    display: inline-block;
    content: '';
    position: relative;
    left: 25px;
}

所以这是最后的 Demo 根据需要

html

<div id="testbefore"></div>
<div id="test"></div>

CSS

body, html {
    margin:0;
    padding:0;
    width:100%;
}
#testbefore {
    width: 100%;
    height: 50px;
    background: green;
}
#test {
    width: 50px;
    height: 600px;
    background: green;
    position: absolute;
    top:0;
    left:0;
    right:0;
    margin: auto;
    display: inline-block;
    -webkit-transform: translate(300px) rotate(90deg);
    -webkit-transform-origin:top;
}
#test:after {
    background: white;
    height: 600px;
    width: 100px;
    border-radius: 100px 0 0 100px / 600px 0 0 600px;
    display: inline-block;
    content:'';
    position: relative;
    left: 50px;
}

关于html - 我怎样才能标记它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25074138/