斜条纹和条纹

时间：2014-12-22 11:12:36

标签： css

我需要做两件事。一个是标题栏，它将保持标题，然后以对角线右边框结束，然后还需要以这种方式通过CSS生成的可变宽度对角线图案（http://grab.by/DhPO）。我尝试过使用各种各样的解决方案，但是大多数都是通过border属性生成条带和对角线切割，除非我应用绝对定位，否则它不会有多大帮助，因为它不能包含文本。有什么聪明的方法吗？

最近的尝试是http://jsfiddle.net/spdawson/HhZQe/light/ - 但是，我无法将tl移至tr边界的位置。对于第二个解决方案，我还没有找到任何有用的东西，并且根本不知道如何处理它。

3 个答案:

答案 0 :(得分：3)

您可以在:after上使用三角形：第一张图片使用伪元素，第二张图片使用linear-gradient。

要获得剪辑，linear-gradient的部分已设为transparent。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div id="one">1. Marketing:</div>
<div id="two"><span>Benefits</span> for facilities, therapists and patients</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您始终可以使用对角线渐变like this

是使用gradient generator

创建的

＆＃13;
＆＃13; 
.test {
  height: 50px;
  width: 200px;
  background: rgb(169, 3, 41);
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(60%, rgba(143, 2, 34, 1)), color-stop(61%, rgba(109, 0, 25, 1)), color-stop(70%, rgba(109, 0, 25, 1)), color-stop(71%, rgba(143, 2, 34, 1)), color-stop(72%, rgba(4, 126, 219, 1)), color-stop(80%, rgba(4, 126, 219, 1)), color-stop(80%, rgba(4, 126, 219, 1)), color-stop(81%, rgba(4, 237, 47, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* IE10+ */
  background: linear-gradient(135deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#04ed2f', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
＆＃13; 
<div class="test">Hello</div>
＆＃13;
＆＃13;
＆＃13;

注意

这是一个快速演示，并且（当然）可以改进

创建标题

＆＃13;
＆＃13; 
.test {
  height: 100px;
  width: 400px;
  position: relative;
  padding-top: 30px;
  background: rgb(169, 3, 41);
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(60%, rgba(143, 2, 34, 1)), color-stop(61%, rgba(109, 0, 25, 1)), color-stop(70%, rgba(109, 0, 25, 1)), color-stop(71%, rgba(143, 2, 34, 1)), color-stop(72%, rgba(4, 126, 219, 1)), color-stop(80%, rgba(4, 126, 219, 1)), color-stop(80%, rgba(4, 126, 219, 1)), color-stop(81%, rgba(4, 237, 47, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* IE10+ */
  background: linear-gradient(135deg, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 60%, rgba(109, 0, 25, 1) 61%, rgba(109, 0, 25, 1) 70%, rgba(143, 2, 34, 1) 71%, rgba(4, 126, 219, 1) 72%, rgba(4, 126, 219, 1) 80%, rgba(4, 126, 219, 1) 80%, rgba(4, 237, 47, 1) 81%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#04ed2f', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}
.test:before {
  content: "header";
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  position: absolute;
  padding-top: 5px;
  padding-bottom: 5px;
  top: 0;
}
＆＃13; 
<div class="test">hello</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

在我看来，图像是一种解决方案。

另一种解决方案是渐变：

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left top, red , yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, red , yellow); /* Standard syntax (must be last) */
}
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to yellow:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

但是，也许你想要这个：

body {
    background: #e3e3e3;
    font-family: sans-serif;
    width: 400px;
    margin: 100px auto;
}

a {
    padding: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: block;
     
    border-right: 30px solid transparent;
    border-bottom: 30px solid #4c4c4c; 
     
    height: 0;
    line-height: 50px;
}

div {
     border: 1px solid #4c4c4c; 
     border-top: 3px solid #4c4c4c;      
     padding: 20px;
}
    <a href="#">New Music</a> 
    <div> 
        <h3> Hello, Everyone! </h3> 
        <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p> 
    </div>

享受，
贾科莫

<小时/> 的更新 

body {
    background: #e3e3e3;
    font-family: sans-serif;
    width: 400px;
    margin: 100px auto;
}

a {
    padding: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: inline-block;
     
    border-right: 30px solid transparent;
    border-bottom: 30px solid #4c4c4c; 
     
    height: 0;
    line-height: 50px;
}

div {
     border: 1px solid #4c4c4c; 
     border-top: 3px solid #4c4c4c;      
     padding: 20px;
}
<a href="#">New Music</a> 
    <div> 
        <h3> Hello, Everyone! </h3> 
        <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p> 
    </div>

唯一的变化是：

display: inline-block;

再见，
贾科莫

相关问题
最新问题