Есть ли способ создать наложение со стрелкой И рамкой, как в Google?

ProgramBox

Есть ли способ создать наложение со стрелкой И рамкой, как в Google?

Post author:admin
Запись опубликована:29 апреля, 2023
Post category:Вопросы по программированию

#php #jquery #css

Вопрос:

Я работаю над своим кодом, чтобы создать зеленый круг с вашим именем на нем, со стрелкой и рамкой, точно такой же, который использует Google.

пожалуйста, найдите образец изображения ниже.

Я уже создал зеленый круг и имя, используя css и html, которые вы можете увидеть здесь.

 <div class="profileImage">
  <span id="profilename" class="profilename"></span>
  <div class="flex-container">
  </div> 
</div>

 .profileImage {
    -webkit-background-size: 32px 32px;
    background-size: 32px 32px;
    background-color: green;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    float: right;
    margin-right: 18px;
    margin-top: 12px;
    overflow: hidden;
    position: relative;
    height: 32px;
    width: 32px;
    z-index: 0;
}

.profilename {
    text-align: center;
    color: white;
    font-size: 14px;
    line-height: 32px;
    margin-left: 5px;
    font-weight: bold;
}

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

 $(document).ready(function() {
  var firstName = 'Robert';
  var lastName = 'Jones';
  var intials = firstName.charAt(0) "" lastName.charAt(0);
  document.getElementById("profilename").innerHTML = intials;
});

Когда я нажимаю на зеленый круг, я хочу отобразить наложение с рамкой, но я понятия не имею, как это сделать. Я пытался найти это в Google, но не смог найти.

Не могли бы вы, пожалуйста, показать мне пример, как я могу отобразить наложение с серой рамкой, в которой указаны мое имя, фамилия, адрес электронной почты и кнопка выхода?

Спасибо.

1. Что вы имеете в виду под «flexbox»? Вы имеете в виду более крупное наложение с подробным содержимым? flexbox это метод верстки CSS, который, вероятно, сбивает людей с толку.

2. @BryceHowitson да, извините за это, я думал, что flexbox — это граница, которая поставляется со стрелкой сверху, как в аватарке Google. Итак, как я мог бы сделать более масштабное наложение с подробным контентом, таким как аватарка Google?

3. Проблема в стрелке? В противном случае это просто div с border: 1px solid #ddd

4. посмотрите на CSS triangles . Вам нужно сложить два (один для цвета переднего плана и один для «границы»). Я должен уйти на некоторое время, но приведу пример, если к тому времени, когда я вернусь в Сеть, не будет других ответов.

5. Давайте разбираться с одной проблемой за раз 😀

Ответ №1:

Хорошо, я помогу вам начать с наложения, которое включает стрелку с рамкой вокруг всего объекта.

По сути, вы делаете что-то вроде «визуального промаха в направлении». Мы использовали CSS borders для создания треугольника ТОГО же цвета, что и фон рамки. Это позиционирует его (высота — ширина границы) над полем. Это помещает треугольник ПОВЕРХ верхней части границы, эффективно скрывая его.

Затем есть второй треугольник с цветом, который соответствует границе рамки. Мы размещаем этот треугольник ПОЗАДИ первого треугольника (используя z-index ) и смещаем второй треугольник на ширину границы от первого. Это создает «поддельную» границу, потому что отображается только ширина границы второго треугольника.

 body {
	margin: 50px;
}

.overlay {
	position: absolute;
	width: 300px;
	height: 200px;
	
	// styling
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	border-radius: 4px;
}

.arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #fff transparent;
	top: -9px;
	right: 10px;
	
}
.arrow:after {
	content:"";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #ccc transparent;
	left:-10px;
	top:-1px;
	z-index:-1;
}

 <div class="overlay">
	<div class="arrow"></div>
	<div class="overlayContent">

	</div>
</div>

Мы использовали два элемента (стрелка и содержимое) внутри оболочки наложения, потому что мы закругляем углы, используя overflow:hidden это привело бы к тому, что наши стрелки также были бы обрезаны. Таким образом, вместо этого у нас будет дополнительный контейнер. Область содержимого используется flexbox для перемещения панели кнопок вниз независимо от размера. Есть другие способы сделать это, но это просто.

 body {
	margin: 50px;
}

.overlay {
	position: absolute;
	width: 300px;
	height: 200px;
	
	// styling
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	border-radius: 4px;
}

.arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #fff transparent;
	top: -9px;
	right: 10px;
	
}
.arrow:after {
	content:"";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #ccc transparent;
	left:-10px;
	top:-1px;
	z-index:-1;
}

.overlayContent {
	position:absolute;
	z-index: 1;
	top:0; right:0; bottom:0; left:0;
	overflow:hidden;
	border-radius: 4px;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}
.top {
	flex-basis: 70%;
}
.bottom {
	flex-basis: 30%;
	border-top: 1px solid #ccc;
	background-color: #f5f5f5;
}

 <div class="overlay">
	<div class="arrow"></div>
	<div class="overlayContent">
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
</div>

Это основы наложения. Попробуйте заполнить нужный контент и задайте дополнительные вопросы, если вам нужна помощь.