Html 包含文本的 CSS 三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15112819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS triangle containing text
提问by Rron
I have a weird problem at hand and I am struggling to find a solution.
我手头有一个奇怪的问题，我正在努力寻找解决方案。
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]
我<div>只使用 CSS创建了一个三角形“容器”，但我现在想要的是在容器内插入一些文本。
我的目标解决方案必须包含三角形边界内的文本，无论在我希望创建缩略图时插入了多少文本。
一个例子可以在这里找到[注意; 这个例子是非常基本的，只显示了我选择的创建三角形的方式]
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.
再推一点，我想创建一个朝上和一个朝下的三角形，文本必须在每个三角形的底部，所以第一个三角形的文本将在底部，第二个在顶部, 计划 B 只是将三角形内的文本垂直和水平居中。
CSS:
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:
HTML：
<div class="up">
<p>some information text goes here<p>
</div>
回答by Guern
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:
对于您的计划 B（将三角形内的文本垂直和水平居中），我更喜欢作为解决方案，您可以添加以下 css 规则：
.up p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Try it here:
在这里试试：
.up {
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);
}
.up p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}<div class="up">
<p>some information text goes here
<p>
</div>