html - CSS:在标题上包装背景颜色

标签 html css background background-color

<分区>

我在 CMS 系统中有一个带有背景颜色的样式标题。当标题在移动设备上换行时(例如宽度为500px),右侧有很大的空间,div的宽度没有调整。

我怎样才能做到这一点?

.inside {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.ce_headline {
  display: flex
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.ce_headline.angled h2 {
  clip-path: polygon(2vh 0, 100% 0, calc(100% - 2vh) 100%, 0 100%);
  padding: 10px 40px;
  -webkit-clip-path: polygon(2vh 0, 100% 0, calc(100% - 2vh) 100%, 0 100%);
}

.ce_headline h2 {
  font-family: Raleway, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 800;
  color: #fff;
  background: green;
}
<div class="inside">
  <div class="col-12 ce_headline angled">
    <h2 class=""> That is an example headline</h2>
  </div>
</div>

最佳答案

你好伙计!

只需将此代码添加到您的 <style> </style> 中参数!

body{margin:0;padding:0;}
*{box-sizing: border-box;}

关于html - CSS:在标题上包装背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59319601/

上一篇:javascript - 如何使用 javascript、html 和/或 css 获取两个元素并将它们居中?

下一篇:css - Flexbox 响应式最后一列 float 和堆叠

相关文章:

javascript - 向 tbody 元素添加 ID 的正确 HTML 语法是什么?

背景图像顶部的 CSS 边框(相同的 div?)

javascript - 在带有 overflow-y :scroll 的固定元素内使用 scrollTop

ios - 导航栏和 View 的整个图像

ios - ipad mini 的图像命名约定

ios - 如何像动态壁纸应用一样在锁屏上播放视频?

Javascript 函数不是通过点击运行的——我做错了什么?

javascript - 使用 jquery 的 addClass 方法覆盖样式表

javascript - 为什么 <object> 的类型是一个函数?

JavaScript 模态框对于屏幕来说太大了