Question

尝试将其放在已成像的背景上。我已经完成了半工作，但由于某种原因没有附加。将它作为试图连接它们的2个元素是错误的吗？有没有办法让它成为一个元素，或者更好的方法呢？

这是现在的样子：

＆＃13;

.wrapper {
  text-align: center;
}
p {
  font-family: arial;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
}
.header__ribbon {
  padding: 10px 20px;
  background-color: #ad0304;
  color: #fff;
  width: 70%;
  max-width: 350px;
  text-transform: uppercase;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
}
.header__ribbon__point {
  margin: 0;
  width: 0;
  height: 0;
  border-top: 35px solid #ad0304;
  ;
  border-right: 35px solid transparent;
  border-bottom: 35px solid #ad0304;
  ;
  display: inline-block;
  vertical-align: middle;
  border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText {
  font-size: 16px;
}

＆＃13;

<div class="wrapper">
  <div class="header__ribbon">
    <p>Complimentary Event -</p>
    <p class="header__ribbon--secondaryText">
      mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
    </p>
  </div>
  <div class="header__ribbon__point"></div>
</div>

＆＃13;

Answer 1

两个标题DIV之间有一个空格。您可以在包装器类中设置font-size：0。

Answer 2

最好使用伪造的元素，before和after IMO。这是你的小提琴。

https://css-tricks.com/pseudo-element-roundup/

https://jsfiddle.net/vvupo6ha/1/

<div class="wrapper">
  <div class="header__ribbon">
    <p>Complimentary Event -</p>
    <p class="header__ribbon--secondaryText">
      mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
    </p>
  </div>
</div>


.wrapper {
  text-align: center;
}

p {
  font-family: arial;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
}

.header__ribbon {
  padding: 10px 20px;
  background-color: #ad0304;
  color: #fff;
  width: 70%;
  max-width: 350px;
  text-transform: uppercase;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.header__ribbon:before,
.header__ribbon:after {
  position: absolute;
  content: '';
  top:0;
  border-top: 35px solid #ad0304;
  border-bottom: 35px solid #ad0304;
}

.header__ribbon:after {
  right: -35px;
  border-right: 35px solid transparent;
  border-left: 10px solid #ad0304;
}

.header__ribbon:before {
  left:-35px;
  top:0;
  border-right: 10px solid #ad0304;  
  border-left: 35px solid transparent;
}

Answer 3

您将.header__ribbon和.header__ribbon__point设置为内联块，因此内联规则适用：您必须删除它们之间的所有空格。

Answer 4

我会在.wrapper上使用flexbox

.wrapper{
    text-align:center;
    display: flex;
    justify-content: center
}
p{
  font-family:arial;
  font-weight:normal;
  margin:0;
  padding:0;
  text-align:left;
}
.header__ribbon{
    padding: 10px 20px;
    background-color: #ad0304;
    color:#fff;
    width:70%;
    max-width: 350px;
    text-transform: uppercase;
    font-size: 24px;
    display:inline-block;
    vertical-align: middle;
}
.header__ribbon__point{
    margin:0;
    width: 0;
    height:0;
    border-top:35px solid #ad0304;;
    border-right: 35px solid transparent;
    border-bottom: 35px solid #ad0304;;
    display: inline-block;
    vertical-align: middle;
    border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText{
    font-size: 16px;
}

http://codepen.io/anon/pen/xgggjq

如何制作CSS功能区？

4 个答案: