0

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

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.circlewrap {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 90%;
  height: 100px;
}
.circlewrap .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40%;
  text-align: right;
}
.circlewrap .text h1 {
  color: red;
  font-size: 1.5em;
  padding: 6px;
}
.circlewrap .text p {
  font-size: 1em;
  padding: 6px;
}
.circlewrap .h-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60%;
  border: 1px solid red;
  border-radius: 46px/50px;
  border-top-left-radius: hidden;
}
.circlewrap .h-wrap .circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: -1px;
}
.circlewrap .h-wrap .circle .c-cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid #c2c2c2;
  border-radius: 50px;
}
.circlewrap .h-wrap .circle .c-cont img {
  width: 60px;
  height: 60px;
}
.circlewrap .h-wrap .hidden {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
<body>
    <main>
        <div class="circlewrap">
            <div class="text">
                <h1>Анализ конкурентной среды</h1>
                <p>Проводится детальный анализ ТОПА по продвигаемым запросам и сайтам конкурентов</p>
            </div>
            <div class="h-wrap">
                <div class="circle">
                    <div class="c-cont"><img src="img/x1.png"></div>
                </div>
                <div class="hidden">
                    <p>текс текс текст</p>
                </div>
            </div>
        </div>
    
    
    </main>
</body>

Имеется круг с серой границей. Хочу, чтобы при наведении на него справа появлялся блок. Но не могу понять как наложить бордер одного блока на другой. Постоянно отличается.

1 ответ 1

1

у меня вышло вот-так

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

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.circlewrap {
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 90%;
  height: 99px;
}
.circlewrap .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40%;
  text-align: right;
}
.circlewrap .text h1 {
  color: red;
  font-size: 1.5em;
  padding: 6px;
}
.circlewrap .text p {
  font-size: 1em;
  padding: 6px;
}
.circlewrap .h-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60%;
  border: 1px solid red;
  border-radius: 50px/50px;
  border-left: none;
  height:100px;
}
.circlewrap .h-wrap .circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 0px;
}
.circlewrap .h-wrap .circle .c-cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid #c2c2c2;
  border-radius: 50px;
}
.circlewrap .h-wrap .circle .c-cont img {
  width: 60px;
  height: 60px;
}
.circlewrap .h-wrap .hidden {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
<body>
    <main>
        <div class="circlewrap">
            <div class="text">
                <h1>Анализ конкурентной среды</h1>
                <p>Проводится детальный анализ ТОПА по продвигаемым запросам и сайтам конкурентов</p>
            </div>
            <div class="h-wrap">
                <div class="circle">
                    <div class="c-cont"><img src="img/x1.png"></div>
                </div>
                <div class="hidden">
                    <p>текс текс текст</p>
                </div>
            </div>
        </div>
    
    
    </main>
</body>

поправил

2
  • может в браузере дело, но у меня отчетливо видится несоответствие границ примерно на 1-2 пикселя
    – Paul Wall
    24 сен 2017 в 17:15
  • поправил добавил высоту для класа .h-wrap и border-left: none;
    – klifort
    24 сен 2017 в 17:24

Ваш ответ

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

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