CODEWITHSUNDEEP
htmlcssrotation
drooh
drooh

Reputation: 678

Css Rotate 45 causes break in border with gradient

I've noticed that there are slight visible breaks in the CSS border image when rotating. Is there a way to prevent this or another method to achieve the same solution? enter image description here

.box {
  margin: 150px;
  width: 250px;
  height: 250px;
  background: lightGray;
  border: 20px solid blue;
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.r45 {
  transform: rotate(-45deg);
  color: red;
}
<div class="box">
  <p class="r45">Hello</p>
</div>

Upvotes: 0

Views: 782

Answers (2)

Temani Afif
Temani Afif

Reputation: 272827

You can use background and adjust background-clip and you will avoid the strange rendering of border

.box {
  margin: 80px;
  width: 250px;
  height: 250px;
  background: 
    linear-gradient(lightGray,lightGray) padding-box,
    linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) border-box;
  border: 20px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}

.r45 {
  transform: rotate(-45deg);
  color: red;
}
<div class="box">
  <p class="r45">Hello</p>
</div>

Upvotes: 0

Girisha C
Girisha C

Reputation: 1950

Another method to achieve the same solution is using pseudo:after as shown in the below working example, hope it helps :)

.box {
  margin: 150px;
  width: 250px;
  height: 250px;
  background: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.box:after {
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  content: '';
  background: lightGray;
  position: absolute;
}

.r45 {
  transform: rotate(-45deg);
  color: red;
  position: relative;
  z-index: 1;
}
<div class="box">
  <p class="r45">Hello</p>
</div>

Upvotes: 1

Related Questions