Sign in to follow this  
Akkord87

Врестка квадрата и заголовка

Recommended Posts

Здравствуйте!

Помоги пожалуйста решить проблему с небольшим куском верстки :)

Пример на картинке.

Я не могу понять, как свертать так, чтобы правая часть границы квадрата не перекрывала заголовок. При этом если заголовок из 1,2,3 строк то квадрат так же подстраивается и растягивается по высоте.

Есть у кого идеи, как можно это реализовать?

verstka.jpg

Share this post


Link to post
Share on other sites

Как вариант:

<div class="wrap">
  Наука
  <div class="square">
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt obcaecati rem quasi saepe tenetur illo exercitationem dicta explicabo laudantium cumque, expedita voluptate repudiandae perspiciatis culpa suscipit? Necessitatibus nisi qui quaerat!
    </div>  
  </div>
</div>
.square{
  position: relative;
  border-left: 1px solid #000;
}
.square:before, .square:after{
    content: '';
  position: absolute;
  width: 100px;
  height: 1px;
  background: #000;
  left: 0;
}
.square:before{
  top: 0;
}
.square:after{
  bottom: 0;
}
.text{
  position: relative;
  padding: 30px 0 30px 20px;
}
.text:before, .text:after{
  content: '';
  position: absolute;
  height: 20px;
  width: 1px;
  background: #000;
  left: 100px;
}
.text:before{
  top: 0;
}
.text:after{
  bottom: 0px;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,391
    Total Members
    3,128
    Most Online
    VlGo
    Newest Member
    VlGo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Каким должно быть меню на чистом css или с JS сама реализации кнопки анимации открыть/закрыть ?
      Как меню должно работать, вы скажет какой вариант выберешь такой и будет, я верстаю первый шаблон и для меня очень важно отталкиваться в правильном направлении, если можно плюсы и минусы обеих вариантов кто понимает в этом или свой вариант если есть по лучше чем эти, буду очень благодарен

      Варик 1 на чистом css
      https://codepen.io/kretzm/pen/guwEf?editors=0110
      Варик 2 за счет js
      https://codepen.io/porsake/pen/omggbV
    • position: absolute; поможет выйти из ситуации?
    • Как правильно сверстать картинки(руку, лист салата и тд) на данном шаблоне?
      Интересуют именно первые 3 изображения, а именно тарелка, рука с дошиком и лист салата.
      Тарелку можно просто сверстать допустим на флексах разбив блок на 3 столбца. Но вот интересно как сверстать две оставшиеся картинки так еще и с текстом.
      Я подумал, что можно также сверстать на тех же флексах разбив на те же 3(в случае с рукой) и 2(в случае с листом салата) колонки флекс сетку, но в таком случае изображения толкали бы друг друга так как рука с тарелкой и лист салата имеют общую площадь расположения на странице. Как это сделать? Помогите пожалуйста, может какое-то свойство прилипания или вообще другой метод верстки?
  • Popular Contributors

    Nobody has received reputation this week.