3

Как сделать так чтобы было как на изображении - 1

У меня почему-то фон блока с текстом помещает в себя и кружок(before).

.r_title {
  background: #ebebeb;
  width: 470px;
  font-size: 14px;
  padding: 15px 15px 15px 100px;
  position: relative;
}

.r_title::before {
  content: '';
  width: 75px;
  height: 75px;
  background: #445161;
  display: block;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}


/*НЕ ОБРАЩАТЬ ВНИМАНИЯ!*/

.r_title h4 {
  color: #333;
  font-style: italic;
}

.r_title p {
  color: #989898;
  margin-top: 10px;
}
<div class="r_title">
  <h4>
    Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?
  </h4>
  <p>
    Lourens S.
  </p>
</div>

0

3 ответа 3

5

Допустим так

body {
	background-color: #f5f5f5;
	font-family: sans-serif;
}

.r_title {
  width: 776px;
  font-size: 14px;
  position: relative;
  display: flex;
  align-items: start;
}

.r_title .circle {
	min-width: 124px;
	height: 124px;
	background: #445161;
	border-radius: 50%;
	margin-right: 30px;
}

.r_title .description {
	padding: 22px;
	background-color: #ebebeb;
	border-radius: 15px;
	position: relative;
  font-size: 18px;
}
.r_title .description:after {
	position: absolute;
	content: '';
	right: 100%;
	top: 62px;
	transform: translateY(-50%);
	border-width: 15px 15px 15px 0;
	border-style: solid;
	border-color: transparent #ebebeb transparent transparent;
}

.r_title h4 {
  color: #565656;
  font-style: italic;
  margin: 0;
  font-weight: 600;
  line-height: 1.5;
}

.r_title p {
  color: #989898;
  margin: 10px 0 0;
}
<div class="r_title">
	<div class="circle"></div>
	<div class="description">
		<h4>Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur?</h4>
		<p>Lourens S.</p>
	</div>
</div>

4

так ?

.odin{
  width: 400px;
  height: 400px;
  background-color: grey;
}

.fl{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
 padding-top: 40px;
}

.span1{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  margin-right: 40px;
}

.block2{
  width: 200px;
  /*height: 200px;*/
  background-color: blue;
  padding: 20px;
  position: relative;
}

.block2:before{
  content: '';
  display: block;
 
  position: absolute;
  left: -40px;
  top: 40px;
  border: 20px solid transparent; border-right: 20px solid green;
}
.span2{
  color: tomato;
  display: block;
}
<div class="odin">
  <div class="fl">
    <span class='span1'></span>
    <div class="block2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ratione, a, mollitia, cumque voluptatibus pariatur non illo labore officia commodi cum necessitatibus ex. Ducimus reiciendis nam dolore a reprehenderit veritatis, fugit incidunt! At in iste quisquam dolor quas voluptate labore?
      <span class="span2">Lorem ipsum dolor.</span>
    </div>
  </div>
</div>

3

Для .r_title вместо padding задать margin.
Для .r_title::before указать left: -90px;(ну или подогнать свое значение)

.r_title {
    background: #ebebeb;
    width: 470px;
    font-size: 14px;
    margin: 15px 15px 15px 100px;
    position: relative;
}

.r_title::before {
    content: '';
    width: 75px;
    height: 75px;
    background: #445161;
    display: block;
    border-radius: 50%;
    position: absolute;
    left: -90px;
    top: 0;
}

Ваш ответ

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

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