Показать сообщение отдельно
  #6 (permalink)  
Старый 03.10.2015, 06:36
Профессор
Отправить личное сообщение для caetus Посмотреть профиль Найти все сообщения от caetus
 
Регистрация: 23.09.2014
Сообщений: 197

сделаешь дальше сам если не можешь то работа в другом разделе!

<style>
.wrap {
    position: relative;
    margin: 100px;
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    overflow: hidden;
}
.wrap div {
    position: absolute;
    width: 110%;
    height: 100%;
}
.wrap div span {
    position: absolute;
    font-size: 2em;
}
.wrap div:nth-child(1) {
    transform-origin: 0 0;
    transform: rotate(25deg);
    background: #ccc;
} 
.wrap div:nth-child(2) {
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(25deg);
    background: #036;
} 
.wrap div:nth-child(1) span {
    top: 25%;
    left: 25%;
    transform: rotate(-25deg);
    color: #036;
}
.wrap div:nth-child(2) span {
    top: 55%;
    right: 25%;
    transform: rotate(-25deg);
    color: #fff;
}
</style>

<body>
<div class="wrap">
    <div><span>Hello</span></div>
    <div><span>World</span></div>
</div>
</body>
Ответить с цитированием