11

手元に奇妙な問題があり、解決策を見つけるのに苦労しています。

<div>CSSのみを使用して三角形の「コンテナ」を作成しましたが、ここで必要なのは、コンテナ内にテキストを挿入することです。
私が目指している解決策は、サムネイルを作成しようとしているときに挿入されるテキストの量に関係なく、三角形の境界内にテキストを含める必要があります。
例はここにあります[注; この例は非常に基本的なものであり、三角形を作成するために選択した方法のみを示しています]

もう少し押して、上向きと下向きの三角形を1つずつ作成し、それぞれのベースにテキストを配置する必要があるため、最初の三角形のテキストは下に、2番目の三角形は上になります。 、プラン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 class="up">
    <p>some information text goes here<p>
</div>
4

2 に答える 2

13

ソリューションとして私が好むプラン 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 class="up">
  <p>some information text goes here
    <p>
</div>

JSFiddleで見る

于 2013-02-27T13:47:29.880 に答える