0

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

  1. 表现得像一个标准的 HTML 按钮，我可以在其中设置标题/值并且是“可点击的”。
  2. 能够根据文本输入的长度缩放决策框大小。
  3. 因此，可以说通常为矩形的文本框非常适合外部决策框。问题是文本框四个边上的空间都被浪费了。我想不出一种更好的方式来更好地利用那个空间并让我的决策框更小。

我曾尝试使用带有文本框覆盖的背景决策形状图像以及修补两个三角形以制作决策框形状，然后在其顶部覆盖一个文本框，但它们似乎都是非常复杂的方法来获得这个简单决策框。

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

与 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>

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

4

0 回答 0