切角效果如下
實現代碼:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
padding: 1em 1.2em;
max-width: 12em;
color: white;
font: 150%/1.6 Baskerville, Palatino, serif;
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0);
}
</style>
</head>
<body>
<div>
i love css i love css i love css i love css
</div>
</body>
</html>
相關推薦
'CSS選擇器和優先級總結，告誡自己不能任性使用！important'
"如果在項目裡面使用了通用的reset.css樣式，但是在具體的頁面裡面要對同一個樣式進行覆蓋式修改，不借助與scoped的和inner style，你會怎麼做？會不會像我一樣在剛接觸的時候給要覆蓋的樣式後面加上!important屬性本文將告訴大家關於CSS選擇器和優先級...
'CSS 偽元素基礎知識：before 與after （一）'
"最近因為一些網頁的需要，需要比較深入的使用了CSS 的「偽元素」( Pseudo Element )，發現原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對你的日常工作有所幫助。什麼是「偽元素」？...
'前端學習隨筆15 利用js實現九九乘法表'
"前沿：次隨筆對應的是第十七天到第十八天的學習任務今天的任務：練習使用循環實現一個九九乘法表第一步，最低要求：在Console中按行輸出 n * m = t然後，嘗試在網頁中，使用table來實現一個九九乘法表一、實現方法第一步很簡單，我們只需要使用循環嵌套即可實現，具體代...
HTML
2019-08-10
'登錄案例java實現 ---- Java進階篇'
"登錄案例java實現 ---- Java進階篇目錄一、環境搭建二、目錄結構三、代碼示例3.1、fail.html頁面3.2、Login.htm頁面3.3、IndexServlet.java3.4、LoginServlet.java3.5、LogoutServlet.jav...
'前端項目迭代發版防止瀏覽器緩存js和css'
"歡迎關注我的頭條號：Wooola，專注於Java、Golang、微服務架構，致力於每天分享原創文章、快樂編碼和開源技術。前言最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面並存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是...
推薦中...