在浏览了各种 CSS 网站和这个网站之后,我快到了,但我希望得到一些专家建议。
我正在尝试为包含 3 个部分的网站创建一个部分标题:
- 带有可能的工具提示按钮的标题
- 描述
- 号召性用语按钮
附上样机。
我正在尝试调整箭头宽度,使其不那么“尖”,因为它会占用下一个区域的额外空间。
我目前拥有的是:
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPheader:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #004851;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
z-index: 1;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPdesc:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #F1ECEA;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>
我还没有完成工具提示部分......完成后我会尝试弄清楚......哎呀!
非常感谢任何帮助。
克里斯。
最佳答案
你几乎在那里,只需要将 :before
元素上的 border-left
调整为 10px
值,然后更改right
属性以及 -10px
。我还更新了 RPDesc
元素和 RPheaderButton
元素的左右填充。
https://jsfiddle.net/disinfor/evy952bc/10/
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPheader:before {
content: "";
position: absolute;
right: -5px;
bottom: 0;
width: 0;
height: 0;
border-left: 5px solid #004851;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
z-index: 1;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px 20px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPdesc:before {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid #F1ECEA;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px 10px 10px 20px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>
您可以根据需要调整这两个值,但这会让您更接近您想要的结果。
关于html - 尝试创建带箭头的标题并号召性用语,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54525537/