Question

我正在尝试为流程图生成标准决策框，但它需要执行以下操作：

表现得像一个标准的HTML按钮，我可以在其中设置标题/值并且是“可点击的”。
能够根据文本输入的长度缩放决策框大小。
因此，我们可以说正常的矩形文本框完全适合外部决策框。问题是文本框四面都浪费了空间。我想不出以更好的方式使用该空间的好方法，并使我的决策框变小。

我尝试使用带有文本框叠加的背景决定形状图像以及修补两个三角形形状以使决策框形状然后在其上覆盖一个文本框，但它们似乎都异常复杂意味着得到这个简单的决策框。

在下面添加了代码示例....它可能不正确，因为我还没有让它在决策框顶部显示文本框...但即使这样可行，我的空间使用问题对于决策框内的文本包装仍然没有解决。

我比使用Javascript更喜欢使用HTML / CSS，但如果解释的话，我不介意其中任何一个。

这是我正在使用的两个三角形形状的CSS，尽管它尚未完整。

====== CSS ===

.triangles{
width: 160;
height:150;
z-index:1;
}

.decisiontext{
position:relative
left:0px;
top:-50px;
z-index:2;
}

#left-triangle {
width: 30;
height: 0px;
float:left;
border-right: 79px solid orange;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);
}
#right-triangle {
 width: 40;
 height: 0;
 float:left;
 border-left: 79px solid red;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); 
transform: rotate(0.05deg);
}

======这是html ==============

  <div class="decisionbox">

      <div id="left-triangle"; class="triangles">
      <!-- end .left-triangle -->
      </div>        
      <div id="right-triangle"; class="triangles">
      <!-- end .right-triangle --></div>   

      <div class="decisiontext">

      <button type="button" style=" max-width:100px; white-space:normal; font-    size:10px">I am using the regular button here but needs something that uses space inside         the decision box better.</button>  

      <!-- end .decisiontext -->
      </div>

  <!-- end .decisionbox -->
  </div>

===============================

流程图的决策框，其中包含一些正确包装的文本

0 个答案: