Question

我正在为流的聊天编写代码，但是遇到了一些问题...我只想旋转聊天框的边框而不移动文本或背景。我怎样才能做到这一点？我已经看过一些帖子，但没有解决我的问题。我想做类似chat的事情。我使用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

您可以在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>

Answer 2

您要尝试执行的操作是不可能的。您不能独立于div及其内容移动div的边框。

您需要做的是在第一个div中创建麻烦div。将容器div设置为position: relative，然后将新的内部div绝对定位到容器的边缘，如下所示：position: absolute; top: 0; bottom: 0; left: 0; right: 0;。然后，您可以为内部div的边框设置动画，而内容仍位于没有变换的容器div内。

仅变换边框CSS

2 个答案: