设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › html问题
返回列表 发新帖
查看: 1577|回复: 7

[已解决]html问题

[复制链接]
歌者文明清理员
发表于 2023-7-10 13:22:31 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
Snipaste_2023-07-10_13-19-37.png

如上所示，如何实现左上角黑三角形的效果？

网页源码


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="utf-8">
  6.         <title>dddddgz 官网</title>
  7.         <link rel="icon" href="favicon.ico" type="image/x-icon">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.         <link href="styles/style.css" rel="stylesheet">
  10.        
  11. </head>

  13. <body>
  14.         <h1>你好，这里是 dddddgz 官网。</h1>
  15.         <p>dddddgz 目前有以下几项服务：</p>
  16.         <table>
  17.         <tr>
  18.                 <td class="item" onclick="jumpTo('folders/1.html');" title="打开文件夹">
  19.                         <table>
  20.                         <td>
  21.                         <img src="icons/python.ico" width="50" height="50">
  22.                         </td>
  23.                         <td>
  24.                         技术交流区
  25.                         </td>
  26.                         </table>
  27.                 </td>
  28.                 <td class="white-item"></td>
  29.                 <td class="item" onclick="jumpTo('folders/2.html');" title="打开文件夹">
  30.                         <table>
  31.                         <td>
  32.                         <img src="icons/fishc.ico" width="50" height="50">
  33.                         </td>
  34.                         <td>
  35.                         <span>友情链接</span>
  36.                         </td>
  37.                         </table>
  38.                 </td>
  39.         </tr>
  40.         </table>
  41.         <script src="act/main.js"></script>
  42. </body>

  44. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
编程追风梦
2023-7-10 15:56:07
编程追风梦 发表于 2023-7-10 15:50
用不着大动干戈的改啥，直接在CSS样式表里边添加代码：
上面那段`styles/style.css`文件里面，我这里面用 ...

我写了代码，结果一点击确定编辑，就成这样了！！！

我这里重新打一下代码
  1. .item:before {
  2.   content: "";
  3.   position: absolute;
  4.   top: 0;
  5.   left: 0;
  6.   width: 0;
  7.   height: 0;
  8.   border-top: 50px solid black;
  9.   border-right: 50px solid transparent;
  10. }
复制代码


小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

歌者文明清理员
 楼主| 发表于 2023-7-10 13:28:32 | 显示全部楼层
陶远航 发表于 2023-7-10 13:22
要实现左上角黑色三角形的效果，您可以使用 CSS 中的伪元素 ::before 或者 ::after 来创建一个绝对定位的元 ...

Snipaste_2023-07-10_13-28-10.png

《真·黑三角形》
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

歌者文明清理员
 楼主| 发表于 2023-7-10 13:46:15 | 显示全部楼层
sfqxx 发表于 2023-7-10 13:45
你没有实现你是怎么做出这个效果的。

?
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-9-22 16:54

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表