html – 包含文本的CSS三角形

概述我手边有一个奇怪的问题,我正在努力寻找解决方案. 我创建了一个三角形< div> “容器”只使用CSS但我现在想要的是在容器中插入一些文本. 我想要的解决方案必须包含三角形边界内的文本,无论插入多少文本,因为我希望创建缩略图. 一个例子可以找到here [注意;这个例子非常基本,只显示我选择创建三角形的方式] 进一步推动它,我想创建一个面朝上的三角形,一个面朝下,文本必须位于每个三角形的底部,因此 我手边有一个奇怪的问题,我正在努力寻找解决方案.

我创建了一个三角形< div> “容器”只使用CSS但我现在想要的是在容器中插入一些文本.
我想要的解决方案必须包含三角形边界内的文本,无论插入多少文本,因为我希望创建缩略图.
一个例子可以找到here [注意;这个例子非常基本,只显示我选择创建三角形的方式]

进一步推动它,我想创建一个面朝上的三角形,一个面朝下,文本必须位于每个三角形的底部,因此对于第一个三角形,文本将位于底部,而第二个位于顶部,计划B只是将文本在垂直和水平方向上居中在三角形内.

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：

<div >    <p>some information text goes here<p></div>

解决方法@H_301_19@ 对于您的计划B(将文本在垂直和水平三角形中居中),我更喜欢作为解决方案,您可以添加此CSS规则：

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

在这里试试：

.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 >  <p>some information text goes here    <p></div>

View on JSFiddle

总结

以上是内存溢出为你收集整理的html – 包含文本的CSS三角形全部内容，希望文章能够帮你解决html – 包含文本的CSS三角形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。