Как мне написать поверх div в форме треугольника с помощью CSS?

В настоящее время я пытаюсь писать слова на div в форме треугольника, который я создал с помощью CSS.

Здесь:

.triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>

Как видите, вид неуместен, поскольку я хочу, чтобы он находился внутри фигуры. Я также хочу, чтобы он вращался, чтобы было приятно для глаза. Я знаю, что вращение текста происходит примерно так (пример):

-moz-transform: rotate(-90deg);

Могу ли я достичь цели с помощью CSS или мне нужно добавить JS?

Большое спасибо!


javascript html css css-shapes text-rotation
person user23524697    schedule 04.02.2015    source источник
comment
Вы можете добиться этого только с помощью CSS.   -  person Gildas.Tambo    schedule 04.02.2015

Ответы (3)


arrow_upward
4
arrow_downward

Используйте псевдоэлементы

ДЕМО - 1

.triangle-topright {
  width: 100px;
  height: 100px;
  transform: rotateZ(45deg);
  margin: 20px;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 64px;
}

.triangle-topright:before {
  content: '';
  z-index: -1;
  position: absolute;
  top:0;
  left: 0;
  width: 0;
  height: 0;
  transform: rotateZ(-45deg);
  border-right: 100px solid gray;
  border-bottom: 100px solid transparent;
}
<div class="triangle-topright">view</div>

ДЕМО - 2

.triangle-topright {
  width: 100px;
  height: 100px;
  margin: 20px;
  position: relative;
  z-index: 1;
  text-align: center
}

.triangle-topright:before {
  content: '';
  z-index: -1;
  position: absolute;
  top:0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>

DEMO - 3 

.triangle-topright {
  width: 100px;
  height: 100px;
  transform: rotateZ(90deg);
  margin: 20px;
  position: relative;
  z-index: 1;
  text-align: center
}

.triangle-topright:before {
  content: '';
  z-index: -1;
  position: absolute;
  top:0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>

ДЕМО - 4

.triangle-topright {
  width: 100px;
  height: 100px;
  transform: rotateZ(90deg);
  margin: 20px;
  position: relative;
  z-index: 1;
  text-align: center
}

.triangle-topright:before {
  content: '';
  z-index: -1;
  position: absolute;
  top:0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-right: 100px solid transparent;
}
<div class="triangle-topright">view</div>

person Gildas.Tambo    schedule 04.02.2015

arrow_upward
2
arrow_downward

Некоторые из приведенных выше ответов уже достигают того же. Вот мой JSfiddle, с которым вы можете поиграть.

http://jsfiddle.net/tmtg1oc8/

.container {
    position: relative;
}

.triangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 100px solid gray;
    border-left: 100px solid transparent;
    z-index: -1;
}

.content {
    padding: 40px;
}

И HTML

<div class="container">
    <div class="triangle"></div>
    <div class="content">hello</div>
</div>
person Roy Prins    schedule 04.02.2015

arrow_upward
1
arrow_downward

Вот пример выполнения этого только с помощью CSS.

HTML

<section class="page_block">
    <div class="row">
        <div class="col-md-1">
            <div id="header">
                <h1 class="verticaltext">
                    Vert Text
                </h1>
            </div>
        </div>
        <div class="col-md-11">
            <p>Column Somethin?</p>
        </div>
    </div>
</section>

CSS

.page_block {
    margin:0px;
    padding:10px;
}
#header { 
    position: relative; 
}
.verticaltext {
    transform: rotate(45deg);
    transform-origin: right, top;
    -ms-transform: rotate(45deg);
    -ms-transform-origin:right, top;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin:right, top;
    position: absolute; 
    color: #ed217c;
}
person U r s u s    schedule 04.02.2015