1

Верстаю psd макет, вот собственно что нужно сделать на данном этапе:

введите сюда описание изображения нужно чтобы кнопка,которая находится в самом контейнере,выводилась по центру его нижнего бордера.У меня это получилось сделать,код будет ниже,но проблема в том,что бордер не убирается на месте кнопки,а проходит через нее,вот код(я создал новый проект дабы все выглядело проще):

body{
	height: 100vh;

	display: flex;
	justify-content: center;
	align-items: center;
}

.container{
	width: 500px;
	height: 250px;

	display: flex;
	flex-direction: column;
	align-items: center;

	border: 1px solid silver;

}

.container a{
	 text-decoration: none;
	 color: #000;
	 padding: 5px;
	 border: 1px solid silver;
	 width: 50px;

	 margin-top: 50px;
}
<body>
	<div class="container">
		<h1>Text--h1</h1>
		<p>Text--p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi optio, nulla neque repellat ratione ab voluptas aspernatur sapiente. Quasi eos doloremque commodi, perferendis quas quaerat placeat quo asperiores itaque sit.</p>
		<a href="#">Text--a</a>
	</div>
</body>

Собственно, надо чтобы кнопка была по центру нижнего бордера контейнера в котором она находится, и чтобы бордер отсутствовал там, где есть кнопка

1 ответ 1

1

Насколько я понимаю, проблема была конкретно в необходимости сохранить прозрачность. Предлагаю такой вариант.

UPD: высота контейнера не всегда может быть фиксированной, поэтому апнул код с расположением кнопки внизу блока без привязки к высоте.

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  width: 500px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  background: #d3d3d3;
  border: 1px solid silver;
  border-bottom: none;
}
.container .global-container {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
}
.container .link-container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.container .link-container .link-block:before, .container .link-container .link-block:after {
  content: "";
  position: absolute;
  height: 1px;
  top: 15px;
  width: calc(50% - 20px - 50px);
  background: silver;
}
.container .link-container .link-block:before {
  left: 0;
  width: calc(50% - 20px - 50px);
}
.container .link-container .link-block:after {
  right: 0;
}
.container .link-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 30px;
  text-decoration: none;
  color: #000;
  border: 1px solid silver;
}
<body>
	<div class="container">
		<h1>Text--h1</h1>
		<p>Text--p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi optio, nulla neque repellat ratione ab voluptas aspernatur sapiente. Quasi eos doloremque commodi, perferendis quas quaerat placeat quo asperiores itaque sit.</p>
    <div class="global-container">
      <div class="link-container">
        <div class="link-block">
          <a href="#">Text--a</a>
        </div>
      </div>
    </div>
	</div>
</body>

Ваш ответ

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

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