中心三角底部Div與盒子陰影

我有一個光滑的盒子陰影有一個使用「邊框技巧」（取自this stackoverflow問題）創建的三角形的div。我想在三角形上也有箱形陰影。由於它是用邊界製作的，所以這可能是不可能的，但是你是否知道這個問題的其他方法/相對優雅的解決方法？中心三角底部Div與盒子陰影

下面的代碼片段是我的代碼的當前版本，沒有三角陰影。

.hero { 
 
    z-index: 1; 
 
    text-align: center; 
 
    padding-top: 6%; 
 
    position: relative; 
 
    background-color: red; 
 
    height: 320px !important; 
 
    width: 100% !important; 
 
    box-shadow: 0px 3px 4px green; 
 
} 
 

 
.hero:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: solid 50px red; 
 
    border-left: solid 50px transparent; 
 
    border-right: solid 50px transparent; 
 
}

<div class="hero"></div>

在此先感謝;）

Picture of the Layout right now, with the missing shadow around the triangle

來源

2017-10-16 Johannes Weitnauer

https://codepen.io/ryanmcnz/pen/JDLhu – CBroe

謝謝，這對我有用。但是，當我調整窗口的大小時，大格子的盒子陰影有時會在三角形中畫出一條直線，任何想法如何解決這個問題？ –

不知道這是否只是由Chrome f12「響應式」工具引起的，因爲手動調整窗口大小時不會發生這種情況 –

你可以嘗試「變換旋轉」伎倆，如表現在下面的代碼片段。

.hero { 
 
    z-index: 9; 
 
    text-align: center; 
 
    padding-top: 6%; 
 
    position: relative; 
 
    background-color: red; 
 
    height: 320px !important; 
 
    width: 100% !important; 
 
    box-shadow: 0px 3px 4px green; 
 
} 
 

 
.hero:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    transform: rotate(135deg); 
 
    box-shadow: 0px -3px 4px green; 
 
} 
 

 
.hero-clip { 
 
    position: absolute; 
 
    bottom: 0; 
 
    background: inherit; 
 
    height: 35px; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 9; 
 
}

<div class="hero"> 
 
    <div class="hero-clip"></div> 
 
</div>

來源

2017-10-16 20:40:58 UncaughtTypeError

這是一個有點kludgey變通方法，但我的做法是重疊的正方形的DIV，旋轉45度，正如我在小提琴那樣：

https://jsfiddle.net/needsmorejson/wgxp1tcp/

HTML：

<div class="hero"> 
    <div class="sidekick"> 
    </div> 
</div>

CSS：

.hero { 
    z-index: 1; 
    text-align: center; 
    padding-top: 6%; 
    position: relative; 
    background-color: red; 
    height: 320px !important; 
    width: 100% !important; 
    box-shadow: 0px 3px 4px green; 
} 
.sidekick{ 
    width:71px !important; 
    height:71px !important; 
    z-index: 1; 
    text-align: center; 
    position: absolute; 
    top: 333px; 
    left: 50%; 
    padding-top: -25px !important; 
    margin-top -25px !important; 
    margin-left: auto; 
    margin-right: auto; 
    transform: rotate(-45deg); 
    background-color: red; 
    border-top: solid 0px transparent; 
    border-right: solid 0px transparent; 
    box-shadow: -3px 3px 4px green; 
}

但值得注意的是，我的「三角形」不太適中居中。

來源

2017-10-16 21:01:26

中心三角底部Div與盒子陰影

回答

相關問題