DWQA QuestionsCategory: ProgramDiv only has four corners how to achieve the border?
No fengyue zz asked 3 weeks ago

Div only has four corners how to achieve the border? Something like this?
Div only has four corners how to achieve the border?

6 Answers
Best Answer
leeenx answered 3 weeks ago

Css3 can be implemented with background as follows:

.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}
<div class="rect"></div>

Actually, I think it’s better to use itborder-imageThe implementation is simple, but the border-image to cut the graph,

leeenx replied 3 weeks ago

To left, to bottom is the direction of the gradient, and I’m doing it habitually. Since there is no gradient in this instance, the direction doesn’t matter. It is background-size that determines the edges. If I need to use a gradient, then my orientation will work.

T_one replied 3 weeks ago

Why does “to left” have the same effect as “to bottom”, or “to bottom” have the same effect as “to left”

The seven cool answered 3 weeks ago

clipboard.png
clipboard.png
Forcibly removed

Badbad little brother replied 3 weeks ago

Div must put things, this is not covered, you big liar.

toBeTheLight answered 3 weeks ago

Let’s do the background. Pseudo-elements do not write content, and your example is not a solid color background, not applicable.
Or you can force the two together, but it’s not good to have useless elements.

#border{
  width: 100px;
  height: 100px;
  position: relative;
  margin: 100px auto 0;
}
#border:after{
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-left: 1px solid black;
  border-top: 1px solid black;
}
#border:before{
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  display: block;
  height: 25%;
  width: 25%;
  border-right: 1px solid black;
  border-top: 1px solid black;
}
// and then the next one
Up every day poof answered 3 weeks ago

1. Provide an idea:

  • Write adivhaveborder: 3px solid blue;
  • divWrite fourdivPosition upper, lower, left and right occlusion center respectivelyborderPart of the

2. Or in someone else’s mind, you need to have two elements to set them separately::beforewith::after

yummy answered 3 weeks ago

Well, I don’t know if I’ve got any acceptance of this idea, but it’s two divs, one of them rotated 45 degrees, covering the sides
clipboard.png
clipboard.png