Преобразовать только границы CSS

Question

Я пишу код для чата моего потока, но у меня возникли некоторые проблемы ... Я хочу повернуть только границу окна чата без перемещения текста или фона.Как я могу это сделать?Я уже прочитал какой-то пост, но не решил мою проблему.я хочу сделать что-то подобное чат .я использую StreamLabs.

Английский не мой родной язык;прошу прощения за любые ошибки с моей стороны.

Я новичок в интерфейсе, и эти проблемы отнимают у меня покой.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,700);

body {
    background: $background_color;
    color: $text_color;
}

html, body {
    height: 600%;
    overflow: hidden;
    transform: translate(0px, -10px);
}

#log {
    font: 90;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px 16px;
    padding-top: 100px;

}

#log>div {
    margin-bottom: 45px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 10px 10px;
    animation: fadeInDown .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
    -webkit-animation: fadeInDown .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
    border-radius: 8px;

}



#log>div.deleted {
    visibility: hidden;
}

.meta {
    display: table;
    line-height: em;
    transform: translate(-20px,-30px);
    border-radius: 0px 05px 05px 05px;
    border: 10px solid #ffd600;
    background: #ffd600;
    margin-bottom: -22px;
    font-weight: 800;

}

.message {
  word-wrap: break-word;
  display: block;
  padding-left: 6px;
  line-height: em;
  color:white;]

}

.name {
    color: Black;
    font-size: em;
    text-transform: initial;
    font-weight: 600;

}

.colon {
    display: none;
}

.badge {
    float: left;
    padding-left: 2px;
    padding-right: 7px;
    padding-top: 2px;
    height: 0.8em;
}

#log .emote {
    background-repeat: no-repeat;
    background-position: center;
    padding: 0.1em;
    background-size: contain;
}

#log .emote img {
    display: inline-block;
    height: 1em;
    opacity: 0;
    vertical-align: top;
}

<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout">
</div>

<!-- chat item -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

<script type="text/template" id="chatlist_item">
  <div data-from="{from}" data-id="{messageId}">
    <span class="meta" style="color: {color}">
      <span class="badges">
      </span>
      <span class="name">{from}</span>
    </span>

    <span class="message">
      {message}
    </span>
  </div>
</script>

Answer 1

То, что вы пытаетесь сделать, невозможно.Вы не можете перемещать границу элемента div независимо от элемента div и его содержимого.

Что вам нужно будет сделать, это создать элемент div внутри первого элемента div.Установите для контейнера div значение position: relative, а затем обязательно разместите новый внутренний div по краям контейнера следующим образом: position: absolute; top: 0; bottom: 0; left: 0; right: 0;.Затем вы можете анимировать границу внутреннего элемента div, пока содержимое по-прежнему находится внутри контейнера div без преобразования.

Answer 2

Вы можете добавить новый элемент в html и стилизовать его так, чтобы он выглядел как эта граница, или стилизовать псевдоэлемент, например :: before или :: after, чтобы придать вам такой вид.

.tilted-border {
  margin: 10px;
  background: purple;
  border-radius: 10px;
  width: 200px;
  height: 100px;
  position: relative;
  padding: 0;
}

.tilted-border:after {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  border: 5px solid red;
  border-radius: 10px;
  transform: rotate( 5deg);
  pointer-events: none;
}

<div class="tilted-border"></div>