div+css を使用して、三角形の中に単語を含む三角形を実装します
以下に示すように:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.a{ border-bottom:1px solid #aaa; height:50px; width:100px; position:relative; overflow:hidden;}.b{ position:absolute; display:block; top:0px; left:0px; width:100px; height:50px;}.b i,.b em{ position:absolute; left:0px; bottom:0px; border-color:transparent; border-color:rgba(255,255,255,0); border-style:solid; border-width:0 50px 50px 50px;}.b i{ border-bottom-color:#aaa;}.b em{ border-bottom-color:#FFF; bottom:-1px;}.text{ position:absolute; bottom:10px; background:none; border:none; outline:none; text-align:center; width:100%;}</style></head><body><div class = "a"> <span class = "b"> <i></i> <em></em> </span> <input type = "text" value = "文字" class = "text"/></div></body></html> 測位シミュレーションを使用します。試してみてください。
以下のものよりも優れています!
リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
