0

I'm trying to make the following shape only with css, problem is I can't get the middle white square right in the middle, how could you go about this? shape:

enter image description here

This is what I have so far:

<div style="position:absolute; top:20px; right:20px; border-bottom:100px solid white; border-left:100px solid blue;">
			    <span style="width:50px; z-index:99999; background-color:white; height:50px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"></span>
			</div>

Improve this question

3 Answers 3

Reset to default
4

Or just use plain old borders.

.border {
  width: 15px;
  height: 15px;
  border: 15px solid transparent;
  border-top-color: #39373c;
  border-left-color: #39373c;
}
<div class="border"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You can do easier with border-image and a simple gradient:

.box {
  width:50px;
  height:50px;
  border:50px solid transparent;
  border-image:linear-gradient(to bottom right,blue 50%,transparent 0) 20;
}
<div class="box">
</div>

With your code you can adjust like this:

.box {
  position: absolute;
  top: 20px;
  right: 50px;
  border-bottom: 100px solid white;
  border-left: 100px solid blue;
}

.box>* {
  width: 50px;
  z-index: 2;
  background-color: white;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-150%,50%);
}
<div class="box">
  <span style=""></span>
</div>

Improve this answer

Comments

0 

.corner {
  border: 20px solid black;
  border-right-color: transparent;
  border-bottom-color: transparent;
  width: 30px;
  height: 30px;
}
<div class='corner'></div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.