相关疑难解决方法(0)

L形div容器

我试图使用CSS绘制以下"L"形div.

L形容器div

如何在这个L形容器中绘制这样的形状以便包含文本流?

css css3 css-shapes

7
推荐指数
2
解决办法
4459
查看次数

我如何制作星球大战介绍塑造textarea?

通常情况下,textareas只是枯燥的老长方形:

一个普通的textarea,带有Empire Strikes Back的开场白.

但是,是否有可能形成类似于星球大战入门的文本区域?

The Empire Strikes Back着名的开场白.

**注意:灵感来自SO#20734620:textarea的异常形状 - 请注释.*

更新:感谢Niet the Dark Absol我能够让它运转起来.只需要玩字体和颜色. 形状像星球大战的文字区域爬行

textarea {
width:600px;
height:500px;
transform:perspective(1000px) rotateX(45deg);
display:block;
margin:0 auto;
text-align: center;
line-height:200%;
color: yellow;
background-color: black;
font-size: 1.75em;
}
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

6
推荐指数
1
解决办法
3846
查看次数

在自定义文本区域中显示插入符号而不显示其文本

我有一个自定义textarea.在这个例子中,它随机地使字母变为红色或绿色.

var mydiv = document.getElementById('mydiv'),
    myta = document.getElementById('myta');
function updateDiv() {
  var fc;
  while (fc = mydiv.firstChild) mydiv.removeChild(fc);
  for (var i = 0; i < myta.value.length; i++) {
    var span = document.createElement('span');
    span.className = Math.random() < 0.5 ? 'green' : 'red';
    span.appendChild(document.createTextNode(myta.value[i]));
    mydiv.appendChild(span);
  }
};
myta.addEventListener('input', updateDiv);
Run Code Online (Sandbox Code Playgroud)
body { position: relative }
div, textarea {
  -webkit-text-size-adjust: none;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font: 1rem sans-serif;
  padding: 2px;
  margin: 0;
  border-radius: 0;
  border: 1px solid #000;
  resize: none; …
Run Code Online (Sandbox Code Playgroud)

html javascript css textarea

6
推荐指数
1
解决办法
940
查看次数

标签 统计

css ×3

html ×2

javascript ×2

css-shapes ×1

css3 ×1

jquery ×1

textarea ×1