CODEWITHSUNDEEP
htmlcss
Vision
Vision

Reputation: 41

how can I make diagonal lines with css

I'm trying to create a diagonal line with CSS, like the following image, but I have no idea how to do it. screen

Could you guide me how to do it?

.container {
  position: relative;
  background: #632878;
  background: -moz-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
  background: -webkit-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
  background: linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: repeat;
  width: 200%;
  height: 100vh;
  background-attachment: fixed;
  overflow: hidden;
}

.container:before {
  content: '';
  position: absolute;
  left: 1%;
  width: 20%;
  height: 160%;
  background-color: rgb(255, 255, 255);
  /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(55deg);
  -moz-transform: rotate(55deg);
  transform: rotate(55deg);
}
<div class="container">
  <!-- Content... -->
</div>

Upvotes: 1

Views: 86

Answers (1)

Temani Afif
Temani Afif

Reputation: 272866

You can consider multiple background. Here is an example:

.container {
  margin: 0;
  background: 
    linear-gradient(to top right,   transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% + 60px/2 + 80px/2)/100% 80px,
    linear-gradient(to bottom right,transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% - 60px/2 - 120px/2)/100% 120px,
    linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)) center/100% 60px,
    
    linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: no-repeat;
  height: 400px;
  width:400px;
  overflow: hidden;
}
<div class="container">

</div>

Or clip path like below:

.container {
  margin: 0;
  background:
    linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: no-repeat;
  height: 400px;
  width:400px;
  position:relative;
}
.container::before {
  content:"";
  position:absolute;
  top:80px;
  bottom:50px;
  left:0;
  right:0;
  background:rgba(255, 255, 255, 0.5);
  -webkit-clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);
   clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);  
}
<div class="container">

</div>

Another idea with rotation and perspective:

.container {
  margin: 0;
  background:
    linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: no-repeat;
  height: 400px;
  width:400px;
  position:relative;
  overflow:hidden;
}
.container::before {
  content:"";
  position:absolute;
  top:140px;
  bottom:120px;
  left:0;
  right:0;
  background:rgba(255, 255, 255, 0.5);
  transform:perspective(200px) rotateY(-25deg);
  transform-origin:left;
}
<div class="container">

</div>

Upvotes: 4

Related Questions