Border bóng trên một cạnh của một CSS tam giác

Question

Tôi có CSS ​​này tam giác:

http://codepen.io/orweinberger/pen/myEoVa

Mã sản phẩm:

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
.triangle { 
    position:absolute; 
    bottom:0; 
    right:0; 
    display: inline-block; 
    vertical-align: middle; 
} 
.triangle-0 { 
    width: 200px; 
    height: 200px; 
    border-bottom: solid 100px rgb(85,85,85); 
    border-right: solid 100px rgb(85,85,85); 
    border-left: solid 100px transparent; 
    border-top: solid 100px transparent; 
} 

.text { 
    color:#fff; 
    position:absolute; 
    bottom:0; 
    right:0; 
} 

Có thể thêm một bóng với một trong các cạnh, tương tự này?

http://codepen.io/orweinberger/pen/ByzbKX

Answer 1

Bạn có thể sử dụng phương pháp khác cho tam giác để có thể áp dụng một hộp bóng với nó:

body { 
 
    overflow: hidden; 
 
} 
 
div { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 150px; 
 
    width: 213px; 
 
    background: lightgrey; 
 
    -webkit-transform-origin:100% 0; 
 
    -ms-transform-origin:100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    box-shadow: 0px -3px 5px 0px #656565; 
 
}

<div></div>

Thông tin thêm ở đây trên triangles with transform rotate

Answer 2

Có thể thực hiện bằng cách kết hợp chuyển đổi CSS và box-shadow. Tuy nhiên tôi nghĩ rằng skewX chuyển đổi ký hiệu là có khả năng hơn trong trường hợp này.

Example Here - (tiền tố của nhà cung cấp bị bỏ qua do ngắn gọn).

.triangle { 
 
    position:absolute; 
 
    bottom:0; right:0; 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 

 
.triangle::before { 
 
    content: ""; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgb(85,85,85); 
 
    box-shadow: 0 0 7px rgba(0,0,0,.8); 
 
    transform: skewX(-45deg); 
 
    transform-origin: 0 100%; 
 
} 
 

 
.text { 
 
    color:#fff; 
 
    position: absolute; 
 
    bottom: 0; right: 0; 
 
}

<div class="triangle"></div> 
 
<div class="text"> 
 
    Lorem ipsum... 
 
</div>

Answer 3

nếu bạn chỉ muốn ra khỏi cái bóng của bạn ở góc dưới bên phải

có có một giải pháp,

*{margin:0px; padding:0px;} 
 
.corner{ 
 
width:150px; 
 
height:150px; 
 
overflow: hidden; 
 
position: absolute; 
 
right:0px; bottom:0px; 
 
} 
 
.corner:before{ 
 
background:rgb(85,85,85); 
 
width:220px; 
 
height:220px; 
 
transform: rotate(45deg); 
 
margin: 48px; 
 
box-shadow: 0px 0px 10px #111; 
 
bottom: 0px; 
 
right: 0px; 
 
content:''; 
 
display: block; 
 
} 
 
.text{position: absolute; 
 
z-index: 2; 
 
right: 10px; 
 
bottom: 10px; 
 
color: #fff;}

<div class="corner"> 
 

 
<div class="text"> 
 
    Tesdt 
 
</div> 
 
</div>