Q:

Как правильно сверстать блок с декорацией?

Как правильнее сверстать такой блок? а именно декорацию. Трансформом, бордерами, фоном или svg и как это реализовать? как бы есть желание стремиться к идеалу, чтобы декор не разваливался если много текста но насколько это важно в случаях с такими айтемами?
Кидаю код html для примера, хотя не вижу в этом особого смысла в том то и вопрос как лучше начинать верстать чтобы лишнего кода не плодить)) 
<div class="item__s1-descr">
    <div class="item__s1-title">ВЫСОКАЯ ДАЛЬНОСТЬ ХОДА</div>
    <div class="item__s1-descr">дальность хода на одном заряде аккумулятора до 50 м</div>
</div>

а вот в css загвоздка, мои мысли либо фоном задать и все фиксированное либо изощряться с трансформами и бордерами что не есть круто по моему, либо как то svg внедрить но тут как раз я не силен, по тому и спрашиваю как реализовать правильнее!

A:

я бы так это сделал 

Синий фон добавлен что бы показать что ни чего не мешает ..

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background: lightblue;
}

.parent {
  width: 400px;
  height: 200px;
  perspective: 400px;
  position: relative;
  margin: 60px;
}

.child-top,
.child-bottom {
  position: absolute;
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
  transform: rotateY(-10deg);
}

.child-bottom {
  bottom: 0;
  height: 50px;
  line-height: 0;
}

.child-top:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 400px;
  border-bottom: 100px solid #FFE344;
  border-left: 50px solid transparent;
  z-index: -1;
  border-right: 50px solid transparent;
}

.child-bottom:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 400px;
  border-top: 100px solid #FFE344;
  border-left: 50px solid transparent;
  z-index: -1;
  border-right: 50px solid transparent;
}
<div class="parent">
  <div class="child-top">
    <h4>высокая дальность хода</h4>
  </div>
  <div class="child-bottom">
    <p>до 50 метров</p>
  </div>
</div>

Дэмо : 

A:

Иконку, конечно лучше добавить svg.
 Контур вокруг текста лучше сделать средствами CSS, например с помощью clip-path.
Так как в SVG нет автоматического переноса текста в отличии от HTML, то придется для каждой строчки svg текста использовать теги переноса <tspan> 
Вот выборка постов на нашем сайте по clip-path 
Почитайте и тут же пробуйте сделать свою форму, приведите в вопросе попытки своего кода. Иначе сейчас ваш вопрос заминусуют, как не имеющий конкретики.

A:

Несколько раз мне попадался этот вопрос. Пару раз прицеливался, начинал, и бросал эту затею. А здесь, думаю, дай все же немного поизвращаюсь на чистом css. И вот, собственно, что получилось. В итоге полное извращение :))

.container {
  position: relative;
  width: 100%;
  height: 90vh;
  min-width: 600px;
  min-height: 350px;
}

@media screen and (max-width: 1000px) {
  .container {
    max-height: 450px;
  }
}

.block {
  position: absolute;
  top: 0;
  left: 10%;
  right: 0;
  bottom: 0;
  background-color: darkgray;
  clip-path: polygon(1% 40%, 15% 5%, 80% 0%, 100% 60%, 90% 100%, 15% 90%, 0% 60%);
}

.block:before {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  background-color: white;
  clip-path: polygon(1% 40%, 15% 5%, 80% 0%, 100% 60%, 90% 100%, 15% 90%, 0% 60%);
}

.icon {
  position: absolute;
  top: 40%;
  left: 0;
  bottom: 40%;
  height: 20%;
  width: calc(12% + 5px);
  background-color: white;
}

.icon:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 10%;
  bottom: calc(50% - 1px);
  width: 50%;
  border-top: 3px dashed darkgray;
  border-bottom: 3px dashed darkgray;
  border-left: 3px dashed darkgray;
  border-radius: 50% 0 0 50%;
}

.icon:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  bottom: 10%;
  top: calc(50% - 2px);
  width: 50%;
  border-top: 3px dashed darkgray;
  border-bottom: 3px dashed darkgray;
  border-right: 3px dashed darkgray;
  border-radius: 0 50% 50% 0;
}

.icon__dots {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: calc(50% - 20px);
  width: 18px;
  border-bottom: 3px dashed darkgray;
}

.icon__dots:before {
  content: '';
  display: block;
  position: absolute;
  bottom: calc(0% - 5px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background-color: darkgray;
}

.icon__dots:after {
  content: '';
  display: block;
  position: absolute;
  top: calc(0% - 3px);
  right: calc(0% - 5px);
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background-color: darkgray;
}

.ico {
  position: absolute;
  top: -100%;
  left: 20%;
  right: 0;
  height: 80%;
  width: 60%;
  background-color: darkgray;
  border-radius: 70% 70% 100% 100%;
  clip-path: polygon( 0% 0%, 90% 0%, 97% 30%, 95% 50%, 93% 60%, 88% 70%, 85% 75%, 83% 77%, 80% 80%, 70% 90%, 54% 99%, 46% 99%, 30% 90%, 20% 80%, 17% 77%, 15% 75%, 12% 70%, 7% 60%, 5% 50%, 3% 30%, 10% 0);
}

.ico:before {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc(100% - 6px);
  border-radius: 70% 70% 100% 100%;
  background-color: white;
  clip-path: polygon( 0% 0%, 90% 0%, 97% 30%, 95% 50%, 93% 60%, 88% 70%, 85% 75%, 83% 77%, 80% 80%, 70% 90%, 54% 99%, 46% 99%, 30% 90%, 20% 80%, 17% 77%, 15% 75%, 12% 70%, 7% 60%, 5% 50%, 3% 30%, 10% 0);
}

.ico:after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 35%);
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 40%;
  width: 50%;
  border: 3px solid darkgray;
  border-radius: 100%;
}

.text {
  position: absolute;
  top: 10%;
  left: 15%;
  right: 20%;
  bottom: 0;
}

h1 {
  font-size: 4vw;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  color: #ce9200;
  font-family: sans-serif;
}

p {
  font-size: 3vw;
  text-align: center;
  line-height: 1.2;
  color: darkgray;
  font-family: sans-serif;
  margin-top: 15%;
}
<div class="container">
  <div class="block">
    <div class="text">
      <h1>Высокая дальность хода</h1>
      <p>дальность хода на одном заряде аккумулятора до 50 м</p>
    </div>
  </div>
  <div class="icon">
    <div class="icon__dots"></div>
    <div class="ico"></div>
  </div>
</div>

