CSS三角形包含文本 [英] CSS triangle containing text

问题描述

我手头有一个奇怪的问题，我很想找到一个解决方案。

I have a weird problem at hand and I am struggling to find a solution.

我创建了一个三角形< div> container仅使用CSS，但现在我想在容器中插入一些文本。

我想要的解决方案必须包含文本在三角形的边界内，无论多少文本插入，因为我正在寻找创建缩略图。

一个例子可以找到这里 [note;这个例子是非常基本的，只显示我选择创建三角形的方式]

I have created a triangle <div> "container" using only CSS but what I would like now is to insert some text inside the container.
The solution I am aiming for has to contain the text within the boundaries of the triangle no matter how much text is inserted as I am looking to create thumbnails.
An example can be found here [note; this example is very basic and only shows the way I have chosen to create the triangle]

再一次推进，我想创建一个三角形面朝上和一个面并且文本必须在每个三角形的基部，因此对于第一个三角形，文本将在底部，并且对于在顶部的第二个，平面图B仅是在垂直和水平三角形内的文本的中心。

Pushing it a little further, I want to create one triangle facing up and one facing down and the text has to be at the base of each one, so for the 1st triangle the text will be at the bottom and for the 2nd at the top, plan B is just to center the text within the triangle both vertically and horizontally.

CSS：

.up {
    text-align:right;
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 0 100px 173.2px 100px;
    border-color: transparent transparent #007bff transparent;
    float: left;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

HTML： b

<div class="up">
    <p>some information text goes here<p>
</div>

推荐答案

您可以添加此css规则：

For your plan B (to center the text within the triangle both vertically and horizontally), which I prefer as solution, you could add this css rule:

.up p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

试用此处

这篇关于CSS三角形包含文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！