1

Как соединить 4 полых квадрата линией цвета полого квадрата с желтым квадратом?

.square_look {
  width: 100%;
  height: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white; }
  .square_look > .yellow {
    width: 12vw;
    height: 12vw;
    border-radius: 1.4vw;
    background-color: yellow; }
  .square_look > .test {
    position: absolute;
    width: 9vw;
    height: 9vw;
    border-radius: 1.4vw; }

.one {
  margin-top: -15vw;
  border: 5px solid red; }

.two {
  margin-top: -15vw;
  margin-left: -25vw;
  border: 5px solid green; }

.three {
  margin-top: -15vw;
  margin-left: 25vw;
  border: 5px solid purple; }

.four {
  margin-top: 15vw;
  border: 5px solid white; }
        <div class="square_look">
            <div class="test one"></div>
            <div class="test two"></div>
            <div class="test three"></div>
            <div class="test four"></div>
            <div class="yellow"></div>
        </div>

4
  • 1
    "...цвета полого треугольника..."?.. 0_о
    – UModeL
    12 дек 2018 в 6:49
  • @UModeL квадрата) 12 дек 2018 в 19:12
  • какая линия должна быть прямая или углом ?
    – SVE
    13 дек 2018 в 9:20
  • @HamSter прямая 13 дек 2018 в 16:01

1 ответ 1

1

Вариант 1 простой css (минус - проблемы с адаптивностью):

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.square_look {
  width: 100%;
  height: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white; }
  .square_look > .yellow {
    width: 12vw;
    height: 12vw;
    border-radius: 1.4vw;
    background-color: yellow; }
  .square_look > .test {
    position: absolute;
    width: 9vw;
    height: 9vw;
    border-radius: 1.4vw; }

.one {
  margin-top: -15vw;
  border: 5px solid red; }

.two {
  margin-top: -15vw;
  margin-left: -25vw;
  border: 5px solid green; }

.three {
  margin-top: -15vw;
  margin-left: 25vw;
  border: 5px solid purple; }

.four {
  margin-top: 15vw;
  border: 5px solid white; }


.test {
  position: relative;
}


.yellow {
  position: relative;
  z-index: 100;
}

.test:after {
  content:'';
  position: absolute;
  width: 5px;
  top:100%;
  z-index: 2;
}

.one:after {
  height: 100%;
  background: red;
  left: 50%;
  margin-left: -2px;
}

.four:after {
  height: 100%;
  background: #fff;
  left: 50%;
  margin-left: -2px;
  top: auto;
  bottom:100%;
}

.two:after {
  right: -5px;
  height: 150px;
  background: green;
  transform:rotate(-70deg);
  transform-origin: 0% 0%;
}

.three:after {
  left: 0px;
  height: 150px;
  background: purple;
  transform:rotate(70deg);
  transform-origin: 0% 0%;
}
<div class="square_look">
  <div class="test one"></div>
  <div class="test two"></div>
  <div class="test three"></div>
  <div class="test four"></div>
  <div class="yellow"></div>
</div>

Вариант 2 с svg и jquery (уже пример приводила тут):

function Line(){

var wrap = $('.square_look');

var item1 = wrap.find('.one'),
    num1X = item1.offset().left+item1.outerWidth()/2,
    num1Y = item1.offset().top+item1.outerHeight()-5;

var item2 = wrap.find('.two'),
    num2X = item2.offset().left+item2.outerWidth()-5,
    num2Y = item2.offset().top+item2.outerHeight()-5;

var item3 = wrap.find('.three'),
    num3X = item3.offset().left+5,
    num3Y = item3.offset().top+item3.outerHeight()-5;

var item4 = wrap.find('.four'),
    num4X = item4.offset().left+item4.outerWidth()/2,
    num4Y = item4.offset().top+5;
  
  
var item5 = wrap.find('.yellow'),
    num5X = item5.offset().left+item5.outerWidth()/2,
    num5Y = item5.offset().top+item5.outerHeight()/2;


    

var svg = $('#svg-line');

var line15 = svg.find('.line-1-5'),
    line25 = svg.find('.line-2-5'),
    line35 = svg.find('.line-3-5'),
    line45 = svg.find('.line-4-5');
  
line15.attr({'x1': num1X, 'y1': num1Y, 'x2': num5X, 'y2': num5Y});
line25.attr({'x1': num2X, 'y1': num2Y, 'x2': num5X, 'y2': num5Y});
line35.attr({'x1': num3X, 'y1': num3Y, 'x2': num5X, 'y2': num5Y});
line45.attr({'x1': num4X, 'y1': num4Y, 'x2': num5X, 'y2': num5Y});

}
  
$(window).on('load resize', function () {
    Line();
});
* {
  box-sizing:border-box;
}


html,
body {
  padding: 0;
  margin: 0;
}

.square_look {
  width: 100%;
  height: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white; }
  .square_look > .yellow {
    width: 12vw;
    height: 12vw;
    border-radius: 1.4vw;
    background-color: yellow; }
  .square_look > .test {
    position: absolute;
    width: 9vw;
    height: 9vw;
    border-radius: 1.4vw; }

.one {
  margin-top: -15vw;
  border: 5px solid red; }

.two {
  margin-top: -15vw;
  margin-left: -25vw;
  border: 5px solid green; }

.three {
  margin-top: -15vw;
  margin-left: 25vw;
  border: 5px solid purple; }

.four {
  margin-top: 15vw;
  border: 5px solid white; }


.test {
  position: relative;
}


.yellow {
  position: relative;
  z-index: 100;
}



#svg-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

  
  <div class="square_look">
    <div class="test one"></div>
    <div class="test two"></div>
    <div class="test three"></div>
    <div class="test four"></div>
    <div class="yellow"></div>
  </div>
  
  <svg id="svg-line">    	
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="5" stroke="red" class="line line-1-5"/>
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="5" stroke="green" class="line line-2-5"/>
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="5" stroke="purple" class="line line-3-5"/>
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="5" stroke="#fff" class="line line-4-5"/>
  </svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.