鍍金池/ 問答/HTML/ CSS如何寫一個三角形定在右上角然后加45度傾斜文字？

CSS如何寫一個三角形定在右上角然后加45度傾斜文字？

clipboard.png

回答
編輯回答
鹿惑
<div class="box">
  <div class="text">hello world</div>
</div>
.box{
  width:100px;
  height:100px;
  background-color: #555;
  color: #fff;
  /* Rotate div */
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); /* Internet Explorer */
  -moz-transform:rotate(45deg); /* Firefox */
  -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
  -o-transform:rotate(45deg); /* Opera */

  position: absolute;
  right: -50px;
  top: -50px;
}

.text {
  position: absolute;
  bottom: 0;
}

在線例子

2017年5月9日 18:11