对角条纹和酒吧 [英] Diagonal stripes and bars

问题描述

我需要实现两件事。一个是标题栏，其将保持标题，然后以对角右边界结束，然后还需要通过CSS以这种方式生成的可变宽度对角图案（ http://grab.by/DhPO ）。我尝试使用各种solutons，但大多数是生成条和对角线剪切通过 border 属性，这不帮助太多，因为它不能包含文本，除非我应用绝对定位。任何聪明的方式围绕这个？

I need to achieve two things. One is a Title bar that will hold a title and then end up with a diagonal right border and then also need a variable width diagonal pattern generated via CSS in this way (http://grab.by/DhPO). I've tried using various solutons, but most of them are generating the strip and diagonal cut via border properties which doesn't help much as it can't contain text unless I apply absolute positioning. Any smart way around this?

最近的尝试是 http://jsfiddle.net/spdawson/HhZQe/light/ - 但是，我不能将 tl 移动到 tr border。对于第二个解决方案，我还没有找到什么有用的，不知道如何处理它。

The most recent attempt is with http://jsfiddle.net/spdawson/HhZQe/light/ - however, I can't move the tl to the position of tr border. For the 2nd solution, I didn't yet find anything helpful and don't know how to approach it at all.

推荐答案

您可以在上使用一个三角形：第一个图像的：伪元素之后，第二个图像的 linear-gradient 。

You could use a triangle on :after :pseudo-element for the first image and linear-gradient for the second image.

为了得到切割， linear-gradient 的部分设置为 transparent 。

To get the cuts, the part of the linear-gradient have been set to transparent.

body {
  background: url(http://www.lorempixel.com/600/400/sports/) no-repeat;
  width: 100%;
  height: 100%;
  margin: 0;
}
div {
  margin: 10px;
}
#one {
  position: relative;
  width: 200px;
  height: 50px;
  background: #324660;
  color: #F5F4F4;
  font-size: 17px;
  text-align: center;
  line-height: 50px;
}
#one:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: -39px;
  top: 0;
  border-top: 50px solid #324660;
  border-right: 40px solid transparent;
}
#two {
  position: relative;
  width: 500px;
  height: 50px;
  background: linear-gradient(135deg, #324660, #324660 56%, #F96620 56%, #F96620 66%, #D1D7DB 66%, #D1D7DB 68%, transparent 68%, transparent 83%, #D1D7DB 83%, #D1D7DB 85%, #F96620 85%);
  color: #F5F4F4;
  line-height: 50px;
  text-align: left;
  padding-left: 20px;
}
span {
  font-size: 17px;
}

<div id="one">1. Marketing:</div>
<div id="two"><span>Benefits</span> for facilities, therapists and patients</div>

这篇关于对角条纹和酒吧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！