-1
A
回答
1
一種方法是在容器上設置背景並使用CSS轉換進行旋轉。
這裏有一個簡單的例子,根據需要使用盡可能多的重疊容器:
body {
margin: 0;
overflow-x: hidden;
font-family: monospace;
color: #fff;
}
.container {
width: 110vw;
margin-top:10vh;
margin-left: -10vw;
padding-left: 10vw;
background: red;
box-shadow: 0 0 15px rgba(0, 0, 0, .33);
transform: rotate(-5deg);
}
.container-inner {
padding: 10vw;
max-width: 80vw;
transform: rotate(5deg);
}
h1 {
margin-left: 10%;
padding-top: 50px;
}
<div class="container">
<h1>Diagonal Background</h1>
<div class="container-inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
</p>
</div>
</div>
1
也許是:
.content {
position: relative;
perspective: 100vw;
padding: 30px;
}
.content::before {
content: '';
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 130%;
background: tomato;
transform-origin: 100% 50%;
transform: translate(-25%) rotateY(-20deg);
outline: 1px solid transparent;
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, laudantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptatum recusandae quos soluta impedit! Deleniti facere enim, quia ut quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eligendi dignissimos adipisci voluptatem voluptate ex maiores consequuntur, cum ducimus voluptatum, ratione similique asperiores reiciendis, odit quis sed. Reprehenderit doloribus, delectus.
</div>
相關問題
- 1. 對角線形狀的CSS響應式佈局
- 2. CSS雙曲線形狀
- 3. 帶有固定角度的對角線與css中的曲線
- 4. 如何刪除兩個對角線css斜角三角形之間的線?
- 5. 圓角與CSS的梯形
- 6. 與CSS的按鈕形狀
- 7. 梯度對CSS三角形
- 8. 如何用css創建角邊形狀?
- 9. 多色線與形狀
- 10. 的Silverlight線形狀與它
- 11. 四邊形的對角線
- 12. CSS表上長對角線
- 13. 對角線穿過CSS
- 14. 傾斜對角線的CSS
- 15. 陰影與CSS梯形形狀按鈕
- 16. 如何繪製畫布形狀之間的對角線
- 17. 與圓角XML形狀面膜佈局
- 18. 與平鋪背景形狀的圓角
- 19. CSS - 創建高級形狀。 (倒三角形?)
- 20. 垂直居中三角形形狀(CSS邊框黑客)
- 21. 三角形中的三角形CSS
- 22. 與CSS三角形和項目之間
- 23. 半三角形CSS與邊境半徑
- 24. CSS六角形與內部元素
- 25. 與css問題的響應三角形
- 26. 六角CSS(矩形與「箭效應」)
- 27. 中心文本與背景CSS「形狀」
- 28. 鏈接與CSS標誌形狀背景
- 29. 按鈕形狀可能與PHP/CSS/HTML?
- 30. 文本調整與CSS形狀
請跟道具呃問題,包括你在嘗試的代碼中,你正面臨着問題,因爲SO在這裏幫助你,而不是給你現成的代碼。 –
也許你可以瀏覽提供類似佈局的網頁模板。 – SachiDangalla
[This](https://css-tricks.com/snippets/css/css-triangle/)可能是一個好開始 –